Which Style Sheet?

[Bendensin]

I am sure this has been posted before, but damned if I can find it.

I need to create a new theme for my site. Which style sheets should I change, and where are they? I downloaded all of the style sheets and searched through them for various colors I need to change, etc... but found nothing.

I also need to change the print font size. Where would I find that option?

[steve00]

just add your changes into custom.css (assuming using IPB 4.x)

If using 3.x then add changes to end of styles.css

[Bendensin]

Thanks Steve for your reply!

I am using IPB 4.x... Where would I find custom.css? I'm in Customization => Themes, and I don't see it.

And since it is a print font, doesn't that need to be changed in a print.css style sheet somewhere?

[steve00]

9 minutes ago, Bendensin said:

Thanks Steve for your reply!

I am using IPB 4.x... Where would I find custom.css? I'm in Customization => Themes, and I don't see it.

And since it is a print font, doesn't that need to be changed in a print.css style sheet somewhere?

far right of theme name click the Edit HTML/CSS button (</>) >> css tab

ALL css to be added to custom.css or any other css file you create in the custom section (where custom.css is located) ... do not make changes to the ipb default css files

Also, make sure not making changes to the IPB default theme (create a copy, name it what you want and make changes to that)

[Meddysong]

1 hour ago, Bendensin said:

And since it is a print font, doesn't that need to be changed in a print.css style sheet somewhere?

There isn't this functionality in IPS4. Rikki once created a quick stylesheet to help people who wanted to print.

[Marc Stridgen]

As mentioned above, there isnt a print functionality as such in IPS4. The above will help, and if you do need to know anything else with regards to editing templates and CSS, it would be worth having a look through our guides, which you can find here.

https://invisionpower.com/4guides/themes-and-customizations/

 

[Bendensin]

I read the documentation on themes, and it tells a lot about what can be done, but isn't exactly a step-by-step guide.

First I copied the default theme and called it "Turkey Central Red." I saved it with the default theme as the parent, and also with no parent (while trying to figure out which would work).

Either way, I clicked the "Edit" button and the tab "Front-End Colors," and changed the background color. The new background color clearly shows in the text box "Body background" and the new color numbers are there. But it isn't showing in the new theme--it still has the old background color.

I tried a CTRL+F5 to clear the browser cache, but the old background color is still showing.

How can I get this background color to change?

Also, which is better? To have default theme as a parent or have it with no parent?

[steve00]

33 minutes ago, Bendensin said:

I read the documentation on themes, and it tells a lot about what can be done, but isn't exactly a step-by-step guide.

First I copied the default theme and called it "Turkey Central Red." I saved it with the default theme as the parent, and also with no parent (while trying to figure out which would work).

Either way, I clicked the "Edit" button and the tab "Front-End Colors," and changed the background color. The new background color clearly shows in the text box "Body background" and the new color numbers are there. But it isn't showing in the new theme--it still has the old background color.

I tried a CTRL+F5 to clear the browser cache, but the old background color is still showing.

How can I get this background color to change?

Also, which is better? To have default theme as a parent or have it with no parent?

have you selected the theme from the drop down menu at bottom of the page when viewing forum ?

usually I DO NOT create child theme of any parent ... create a new theme and make it the parent then try making the changes (remember to make sure you select the them when viewing forum (also make sure the permissions are set to view theme when creating it)

[Bendensin]

Quote

usually I DO NOT create child theme of any parent ... create a new theme and make it the parent then try making the changes (remember to make sure you select the them when viewing forum (also make sure the permissions are set to view theme when creating it)

OK I did right by not making it a child of the default.

For the other part? Operator error! I just realized that I had only made it visible to Admin, but when I was viewing it, I was viewing it as a super-moderator. Thanks Steve, for jarring my brain to make me realize my mistake. Everything is working now.

 

 

 

[steve00]

54 minutes ago, Bendensin said:

OK I did right by not making it a child of the default.

For the other part? Operator error! I just realized that I had only made it visible to Admin, but when I was viewing it, I was viewing it as a super-moderator. Thanks Steve, for jarring my brain to make me realize my mistake. Everything is working now.

 

 

 

No problems .. glad you got it sorted ... enjoy

[Bendensin]

Thanks for your help, Steve. I was pretty good at this with version 3.x.

I've been successful at changing most of the colors, but one is baffling me: The "alternating" color in the forums. I can't find it anywhere in the Front-End Colors. I'll attach an image to explain.

[steve00]

23 minutes ago, Bendensin said:

Thanks for your help, Steve. I was pretty good at this with version 3.x.

I've been successful at changing most of the colors, but one is baffling me: The "alternating" color in the forums. I can't find it anywhere in the Front-End Colors. I'll attach an image to explain.

Unfortunately I do not use the Front end colors way of theming so cannot help

If you want to go the custom.css route then in custom.css add:

.ipsDataList.ipsDataList_zebra .ipsDataItem:nth-child(2n):not(.ipsDataItem_selected):not(.ipsModerated):not(.ipsDataItem_new):not(.ipsDataItem_success):not(.ipsDataItem_warning):not(.ipsDataItem_error):not(.ipsDataItem_info):not(.ipsDataItem_status) {
  background: #fff;
}

obviously use your own color

[Bendensin]

Thank you Steve.

Is the "normal" way of creating a new them to create a new style sheet, which I assume over-rides the default style sheets?

[steve00]

29 minutes ago, Bendensin said:

Thank you Steve.

Is the "normal" way of creating a new them to create a new style sheet, which I assume over-rides the default style sheets?

no ... as has been posted at beginning of this topic ... custom.css (which should be there by default) ... far right of theme name click the Edit HTML/CSS button (</>) >> css tab

[Bendensin]

Thanks again Steve. I am now sailing through this theme thing thanks to you.

Just a side note... I learned to run my forum many years ago from the way this Invision Power support forum is run, and the way the more experienced members are so ready to help others. You are a great example of that, Steve, and I appreciate it.

[steve00]

1 hour ago, Bendensin said:

Thanks again Steve. I am now sailing through this theme thing thanks to you.

Just a side note... I learned to run my forum many years ago from the way this Invision Power support forum is run, and the way the more experienced members are so ready to help others. You are a great example of that, Steve, and I appreciate it.

Glad to help ... as I recall I was once new and needed help from members in those days .,... now and again need help regarding different matters but I try to help where poss.

If like any members posts (not just that may help you but any which you find interesting) you can always show by clicking the 'Like This' button t bottom right of posts (there is no obligation to though)

When you get to know more in later times then you can pass your knowledge on to those new members who may require help

[Bendensin]

Done. It is the least I can do. I will pass it on. I think just this topic is going to help a few people who will be as lost as I was until you helped me.

[Bendensin]

On 6/17/2016 at 3:14 PM, Meddysong said:

There isn't this functionality in IPS4. Rikki once created a quick stylesheet to help people who wanted to print.

I got everything done with my theme, but I am still having trouble making the font size larger when printing. The print font size is so small I have trouble reading it. I've created a print.css style sheet and added the code suggested in @Meddysongs post. I don't know if this is dated code, but I also added a change to the font size at the end, changing the printed font size to 1.5em (way too big) just to see if there was any difference in the printed article. The print.css. style sheet seems to have made no difference at all.

Can anyone see what I'm doing wrong, and how I might make the printed font size larger?

@media print {
	body {
		width: 100%;
		font-family: "Georgia", "Times New Roman", serif;
		background-color: #fff !important;
	}

	#ipsLayout_header > header {
		background-color: #fff !important;
		margin-bottom: 0 !important;
		padding: 10px 0 0 0 !important;
	}

	#elSiteTitle {
		color: #000 !important;
		font-size: 1.8em;
	}

	#elHeaderNavigation {
		background: #fff !important;
		padding: 0 0 15px 0 !important;
		border-bottom: 1px solid #ebebeb;
	}
	#elFooterNavigation {
		background: #fff !important;
		padding: 15px 0 0 0 !important;
		border-top: 1px solid #ebebeb;
	}

	.ipsLayout_container {
		max-width: 100% !important;
	}

	#ipsLayout_contentArea,
	.ipsBox {
		border: 0 !important;
	}

	#ipsLayout_mainArea {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	#ipsLayout_sidebar,
	#elSearchNavContainer, #elMobileNav,
	#elHeaderSubLinks,
	#elUserNav,
	#elWidgetControls,
	.ipsToolList,
	.ipsButtonBar,
	.ipsDataItem_lastPoster,
	.ipsComment_controls,
	.ipsFollow,
	.ipsPageHeader .ipsUserPhoto,
	.ipsLikeRep,
	.cTopicPostArea,
	[data-controller="core.front.core.sharelink"] {
		display: none !important;
	}

	.ipsType_richText {
		font-size: 1.2em;
	}

	.ipsType_sectionTitle {
		background: #333 !important;
		color: #fff !important;
		border-radius: 0 !important;
	}

	.ipsType_pageTitle {
		font-size: 2em;
		color: #000;
	}

	.ipsPageHeader {
		margin: 30px 0 !important;
	}

		.ipsPhotoPanel > div {
			margin: 0 !important;
		}

	.ipsComment {
		border-bottom: 4px solid #333 !important;
		margin-bottom: 0 !important;
	}

	.ipsComment.ipsColumns,
	.ipsComment.ipsColumns > .ipsColumn {
		display: block !important;
		width: 100% !important;
	}

	.ipsComment_author {
		text-align: left !important;
	}

		.ipsComment_author .cAuthorPane_photo,
		.ipsComment_author .cAuthorPane_photo ~ li {
			display: none !important;
		}
p {
  font-size: 1.5em;
  
  }
}