Invision Community 4: SEO, prepare for v5 and dormant account notifications Matt November 11, 2024Nov 11
Posted June 15, 20168 yr 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?
June 16, 20168 yr just add your changes into custom.css (assuming using IPB 4.x) If using 3.x then add changes to end of styles.css
June 17, 20168 yr Author 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?
June 17, 20168 yr 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)
June 17, 20168 yr 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.
June 17, 20168 yr 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/
August 24, 20168 yr Author 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?
August 24, 20168 yr 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)
August 24, 20168 yr Author 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.
August 24, 20168 yr 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
August 24, 20168 yr Author 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.
August 24, 20168 yr 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
August 24, 20168 yr Author 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?
August 24, 20168 yr 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
August 24, 20168 yr Author 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.
August 24, 20168 yr 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
August 24, 20168 yr Author 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.
September 9, 20177 yr Author 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; } }
Archived
This topic is now archived and is closed to further replies.