Archived

This topic is now archived and is closed to further replies.

  • 0

Highlight

Question

Posted · Report post

Can I change just how this hightlight is shown on this page? I believe that I am to change the base .css but unsure how to go about this - http://thebikeshopge.com/thbsge/?page_id=44 #highlight .content-pad .highlight-area { padding-bottom:40px; padding-left:15px; padding-right:15px; padding-top:40px; #highlight .copy-pad .highlight-area { padding-bottom:20px; padding-left:15px; padding-right:15px; padding-top:20px;

Share this post


Link to post
Share on other sites

22 answers to this question

Posted · Report post

don't worry this is confusing for everybody. Platform is basically a foundation (although it can be used on it's own) and Base goes on top of it. Think of a iphone case or something like that. So if you use Base and customize it, it will not change when you get a new iphone because you can still use it and keep your changes. If you made customizations directly to Platform they will be tossed out when you update. Does that make a little more sense? THey work together, but it's best to use Base for editing. Platform must be present in the theme folder for base to work.

Share this post


Link to post
Share on other sites

Posted · Report post

I never edited the file directly I used firebug to see what the changes would look like in the browser - this is a tool that your site / forum recommends... I then went to the child theme and updated the base file which is what I have read and what I did. However nothing that I have done - from what your documentation stated to do to what things that I have been told to do in the forum have done anything. Plus it has been 6 day's trying to get something simple - or at least I thought it should have been, and I am still no where closer to getting this resolved. I admit that I may have done a typo or missed something simple - that is why I included the whole file for review. Yet your response is less then helpful or answering what I need to do - one of your posts you reference a update coming soon - then in another post you mention that I need the upgrade??? Really 6 day's in a forum and I feel I am no closer to moving forward. I have other changes that I would like to do but I am very reluctant to even start them since this has taken so long...

Share this post


Link to post
Share on other sites

Posted · Report post

okay I am confused I though that was what the base was for. are you saying that I can't use the base at all?

Share this post


Link to post
Share on other sites

Posted · Report post

Hey cmunns, yeah I'm on the full width framework. This must be what it is. What are the selectors changed to?

Share this post


Link to post
Share on other sites

Posted · Report post

I understand. We were aware of issues with CSS not working and thus said the update would be coming. ...and we have in fact updated and that's what i was telling you to do. Keep this stuff in your css but update your Platform to 1.1.1 and it should work much better. You are currently on 1.1.0

Share this post


Link to post
Share on other sites

Posted · Report post

You can. This problem has been fixed and set for next update. FYI my recommendation was still utilizing base as any files that are named the same as they are in platform will take precedence. e.g. you can copy the template.postloop.php file into base and customize it and that will take precedence over the version that is in platform.

Share this post


Link to post
Share on other sites

Posted · Report post

Went through the upgrade process and downloaded off your site the 1.1.2 and (I did backup everything first exported the setting and such so I could import everything in the updated site) uploaded the new platformpro which should say 1.1.2 but is says 1.1.1 - not sure why but it does. Then I imported all my settings from the XML file - that worked great. The checked that the base still had everything in it that I was hoping would change. Went to the page in question hoping that everything would be correct and the new setting would be there - but no still default settings. Here is the file again (base). /* ============================= */ /* = HOW TO CUSTOMIZE PLATFORM = */ /* ============================= */ /* Edit this style sheet to create your own custom theme based on the Base Platform theme. Rules placed in this stylesheet will override the default styles of the Base Platform theme and will not be changed or over written when you update the Platform framework. Additionally, since this stylesheet is purely for editing purposes you can easily undo or erase some of the CSS to return your site back to the look and feel of the Base theme. In the Base theme the footer is black ??“ the CSS looks like this: #footer { clear:both; font-size:1em; overflow:hidden; text-align: left; background: #000; color: #999; position: relative; } To change the background color to white, all you have to do is declare a new rule for the color like so: #footer { background: #FFF; } A great tool for modifying themes and inspecting CSS elements is the FireBug extension for FireFox. You can also use the developer tools provided by Chrome (right-click and "inspect element") or Internet Explorer if you're feeling dangerous. Also, for a comprehensive list of CSS rules and usage try consulting W3 schools @ http://www.w3schools.com/css/default.asp */ /* ============================== */ /* = Start Your Custom CSS Here = */ /* ============================== */ /* @ CSS corresponding to the hook used in functions.php; adds a stumbleupon icon to branding section */ .icons .stumbleupon {background: url('../platformpro/images/sprite-socialicons.png') no-repeat -176px 0;} .icons .stumbleupon:hover {background: url('../platformpro/images/sprite-socialicons.png') no-repeat -176px -22px;} /* @ Pullquote Section */ #pullquote.copy{ background: #f7f7f7 url(images/pullquote.png) no-repeat 15px 15px; padding: 15px 20px 15px 45px; margin-bottom: 1.5em; } #pullquote .thepullquote{font-size: 1.5em;margin-bottom: 5px;line-height: 1.3em;} #pullquote .thecitation{color: #AAA; font-style: italic;padding-left: 15px;} /* ============================================== Change to The BikeShpGlenEllyn Service Page - pading around the 'Service Page' highlight. ============================================== */ .page-id-services-2 #highlight .content-pad .highlight-area { padding-bottom:5px; padding-left:15px; padding-right:15px; padding-top:5px; } .page-id-services-2 #highlight .highlight-splash { margin-bottom:0; margin-left:0; margin-right:0; margin-top:1em; } Here is the site - http://thebikeshopge.com/thbsge/services-2 and the page in question. I still am seriously UNCLEAR and why, or what I am doing wrong? Please is there a way that your team can <<<HELP ME>>>....

Share this post


Link to post
Share on other sites

Posted · Report post

yes, add some rules in base.css: `#highlight .content-pad .highlight-area{padding: XXpx}` Site is looking awesome btw!

Share this post


Link to post
Share on other sites

Posted · Report post

This is what I did and it didn't make the changes - I left everything in the base as it comes, and just added the lines that we talked about. What did I do wrong? Thanks on the site - your product is great!! /* ============================== */ /* = Start Your Custom CSS Here = */ /* ============================== */ /* @ CSS corresponding to the hook used in functions.php; adds a stumbleupon icon to branding section */ .icons .stumbleupon {background: url('../platformpro/images/sprite-socialicons.png') no-repeat -176px 0;} .icons .stumbleupon:hover {background: url('../platformpro/images/sprite-socialicons.png') no-repeat -176px -22px;} /* @ Pullquote Section */ #pullquote.copy{ background: #f7f7f7 url(images/pullquote.png) no-repeat 15px 15px; padding: 15px 20px 15px 45px; margin-bottom: 1.5em; } #pullquote .thepullquote{font-size: 1.5em;margin-bottom: 5px;line-height: 1.3em;} #pullquote .thecitation{color: #AAA; font-style: italic;padding-left: 15px;} #highlight .content-pad .highlight-area { padding-bottom:10px; padding-left:15px; padding-right:15px; padding-top:10px; } #highlight .highlight-splash { margin-bottom:0; margin-left:0; margin-right:0; margin-top:1em; }

Share this post


Link to post
Share on other sites

Posted · Report post

` .page-id-44 #highlight .content-pad .highlight-area { padding-bottom:10px; padding-left:15px; padding-right:15px; padding-top:10px; } .page-id-44 #highlight .highlight-splash { margin-bottom:0; margin-left:0; margin-right:0; margin-top:1em; } ` You need to use `.page-id-44` to specify just that one page. Thanks, Bryan

Share this post


Link to post
Share on other sites

Posted · Report post

Okay thank you for that information - I made that change to reflect the page - here is the link http://thebikeshopge.com/thbsge/services-2 However even with this code in place I am still not see the change in the page at all. .page-id-services-2 #highlight .content-pad .highlight-area { padding-bottom:10px; padding-left:15px; padding-right:15px; padding-top:10px; } .page-id-services-2 #highlight .highlight-splash { margin-bottom:0; margin-left:0; margin-right:0; margin-top:1em; }

Share this post


Link to post
Share on other sites

Posted · Report post

Can you try placing the code in: Theme Options > Custom Code > Custom CSS instead of the Base theme and see if that works? Thanks, Bryan

Share this post


Link to post
Share on other sites

Posted · Report post

The problem is here: `.page-id-services-2` as far as I can tell this doesn't even exist? I told you a few replies back you need to use: `.page-id-44` So, all together: ` .page-id-44 #highlight .content-pad .highlight-area { padding-bottom:5px; padding-left:15px; padding-right:15px; padding-top:5px; } .page-id-44 #highlight .highlight-splash { margin-bottom:0; margin-left:0; margin-right:0; margin-top:1em; } ` Okay, confirm if that works or not and if it does we can all have a big phew :). Thanks, Bryan

Share this post


Link to post
Share on other sites

Posted · Report post

Sorry 'No Joy' - I don't understand this seem very simple of a operation, but know matter what I change in the Base.css in the base child theme. Nothing happens - what am I missing or have forgotten to do??? Also I made this change to the file: /* ============================= */ /* = HOW TO CUSTOMIZE PLATFORM = */ /* ============================= */ /* Edit this style sheet to create your own custom theme based on the Base Platform theme. Rules placed in this stylesheet will override the default styles of the Base Platform theme and will not be changed or over written when you update the Platform framework. Additionally, since this stylesheet is purely for editing purposes you can easily undo or erase some of the CSS to return your site back to the look and feel of the Base theme. In the Base theme the footer is black ??“ the CSS looks like this: #footer { clear:both; font-size:1em; overflow:hidden; text-align: left; background: #000; color: #999; position: relative; } To change the background color to white, all you have to do is declare a new rule for the color like so: #footer { background: #FFF; } A great tool for modifying themes and inspecting CSS elements is the FireBug extension for FireFox. You can also use the developer tools provided by Chrome (right-click and "inspect element") or Internet Explorer if you're feeling dangerous. Also, for a comprehensive list of CSS rules and usage try consulting W3 schools @ http://www.w3schools.com/css/default.asp */ /* ============================== */ /* = Start Your Custom CSS Here = */ /* ============================== */ /* @ CSS corresponding to the hook used in functions.php; adds a stumbleupon icon to branding section */ .icons .stumbleupon {background: url('../platformpro/images/sprite-socialicons.png') no-repeat -176px 0;} .icons .stumbleupon:hover {background: url('../platformpro/images/sprite-socialicons.png') no-repeat -176px -22px;} /* @ Pullquote Section */ #pullquote.copy{ background: #f7f7f7 url(images/pullquote.png) no-repeat 15px 15px; padding: 15px 20px 15px 45px; margin-bottom: 1.5em; } #pullquote .thepullquote{font-size: 1.5em;margin-bottom: 5px;line-height: 1.3em;} #pullquote .thecitation{color: #AAA; font-style: italic;padding-left: 15px;} /* ============================================== Change to The BikeShpGlenEllyn Service Page - pading around the 'Service Page' highlight. ============================================== */ .page-id-services-2 #highlight .content-pad .highlight-area { padding-bottom:10px; padding-left:15px; padding-right:15px; padding-top:10px; } .page-id-services-2 #highlight .highlight-splash { margin-bottom:0; margin-left:0; margin-right:0; margin-top:1em; } Here is the page so you can see that there is no change - http://thebikeshopge.com/thbsge/services-2 Thanks

Share this post


Link to post
Share on other sites

Posted · Report post

Hey guys, I seem to be having a similar problem here. I'm using the PlatformPro Base theme and trying to make the changes in the Custom Code field. I'm also using the !important tag to no avail. I have PlatformPro 1.1.1 installed, but still not seeing any change in margins or padding when I try the below code, but anything I try isn't working: #highlight .content-pad .highlight-area { padding-bottom:-10px !important; padding-left:15px !important; padding-right:15px !important; padding-top:10px !important; } #highlight .highlight-splash { margin-bottom:0 !important; margin-left:0 !important; margin-right:0 !important; margin-top:1em !important; } Is the case that we still need to update the Pro theme directly? Thanks in advance!

Share this post


Link to post
Share on other sites

Posted · Report post

We are still sorting out how to organize the stylesheets so this mix up doesn't happen. But for now I recommend making a copy of pro.css and making your changes directly to that file or at the bottom of it.

Share this post


Link to post
Share on other sites

Posted · Report post

Please I understand that I might be a little confused -- but I made the change that does work if I make the change directly to the page with fixbug on the site. So I know that the change that I need for a specific page will show correctly. If I can be directed on how or what I have done wrong...

Share this post


Link to post
Share on other sites

Posted · Report post

okay how do I state this - yes when we started this forum thread oh so many days ago the page in question was - http://thebikeshopge.com/thbsge/?page_id=44 that was before I changed to the following setting from the default setting under permalinks to numeric. Now the pages address is http://thebikeshopge.com/thbsge/services-2 I did however try changing it back to .page-id-44 #highlight .highlight-splash as you described this still has no effect. I know the page was 'page_id=44' it is now 'services-2' because of the change that I had made in the permalinks settings so my logic was since the page is now called 'service-2' that is what I should direct the hook towards not a page naming convention that no is longer called 'page_id=44'? Now I have tried it both ways sent you everything that you have requested and made all the changes - please what am I doing wrong? I know each of you have a tremendous amount of time and code work in WordPress, and that I am not as versed in WordPress as you, but I am not without ability to read and follow procedures and steps that is outlined.

Share this post


Link to post
Share on other sites

Posted · Report post

I don't understand your question. You haven't done anything wrong, you may just need to update platform. You shouldn't have to edit the file directly for the change, that's what I was trying to say.

Share this post


Link to post
Share on other sites

Posted · Report post

Hey you guys if you are using the fixed width design mode the selectors will be different. Is this the problem?

Share this post


Link to post
Share on other sites

Posted · Report post

Also, you currently don't have the Base child/customization theme activated. That is why your changes to base.css aren't working. Make sure that you activate Base, not just Platform and for the record. Every WordPress page will maintain a unique page id no matter what you change in the permalinks.

Share this post


Link to post
Share on other sites

Posted · Report post

Okay - i activate the base then am I using the base or PlatformPro? because now the PlatformPro is deactivated is this correct? What is being used PlatformPro 1.1.2 (which says 1.1.1) or Base 1.03? I just want to know what I am using / and if I do and upgrade to your next version 1.1.3 or such is that being used since the base is active and the PlatformPro is deactivated. What is WordPress using it seems a little counter intuitive at this point. Like I said I am new to the world of WordPress and its workings.

Share this post


Link to post
Share on other sites