Jump to content

Archived

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

Ryan Logan

Custom CSS - Target Specific Section

Recommended Posts

Ryan Logan

Hello all.  Using Firebug, I was able to adjust the top margin of all "Highlight" components.  Now that I'm adding additional "Highlight" components throughout the site, I'd like to target a specific "Highlight", rather then making global changes.

 

Here is my Custom CSS, that make the change...Globally:

.section-highlight .highlight-head {
    margin-top: 60px;
}
 
Here is the Custom CSS I tried, to target a specific "Highlight":   (accuritpresence.com/process)
#highlightujpvqij .section-highlight .highlight-head {
    margin-top: 60px;
}
 
www.accuritpresence.com
 
Thank you.
Ryan

 

Share this post


Link to post
Share on other sites
jmad

Try something along this line. Assign custom-highlight as the section class.

 

.custom-highlight {
.section-highlight .highlight-head {
    margin-top: 60px;
}
}

Share this post


Link to post
Share on other sites
Ryan Logan

Huh?  Sorry, that went right over my head.  How does that target a specic "Hightlight" on a specific page?

Share this post


Link to post
Share on other sites
GetMeWebDesign

rlogan"] I think @[member="jmad means that you add that to your custom CSS/LESS and there by creating a styling class "custom-highlight". You would then reference it in the "custom styling classes" when editing the highlight. The changes you make will apply whenever you use that template globally

However, if you are only using it on one page with a custom top margin to the highlight, then save that template separately and mention it in the template description to remind yourself  ;)


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Ryan Logan

Ah, I see what you're saying.  Never used those settings before.  I performed the following steps and saw no changes during my tests.

 

  1. Copied and pasted Custom CSS from jmad into <Custom>
  2. Edited a test "Highlight" component and added "custom-hightlight" to the Custom Styling Classes
  3. Published
  4. Refreshed page and saw no changed
  5. Closed browsers, cleared caches, repeated all steps...no changes

Share this post


Link to post
Share on other sites
jmad

rlogan

 

Sorry, I think that's because I just tossed that out there thinking I'd used it before.  Let me look into this.  That approach should work...just need to modify.

Share this post


Link to post
Share on other sites
jmad

Try this...and be sure to take out your bit of code that you and I both made.

 

.custom-highlight {
  .highlight-head {
font-size: 30px;
margin-top: 60px;
  }
}

Share this post


Link to post
Share on other sites
Ryan Logan

jmad - That did it.  More importantly than getting it to work, you taught me how to use the Custom Styling Classes.  That was an area I had no clue about.  Very easy now.  : )

 

GetMeWebDesign  - Thank you for jumping in the mix!

Share this post


Link to post
Share on other sites
Danny

OK, there are are two simple methods to target a specific section on a specific page.

 

page-id-X class

 

The first is to use the page-id-X class that is available in the body element. If you inspect one of your pages in Google Chromes Dev Tools (I recommend Chromes dev tools over FireBug, I think its easier), you will notice in your body tag you will see a lot of class names, one of these will look like this "page-id-X" (without quotes) and X will be a numeric value.

 

That numeric value is your pages ID, you can use this class to prefix your code so that the styles only works on that page. For example.

 

body.page-id-123 .section-highlight h2 {
  color: #456;
}

 

This will give the Highlight sections h2 title (if it uses H2, just an example remember) to the color #456. However, this will only take effect on the page that has an id of 123, which you can see in my code above. For me this is a good way to do it, as when you view your code, you can see that its effecting only one page. If you comment your code which is good coding practice, for example.

 

/**
 * This styles the about us page, which has an id of 123!
 */
body.page-id-123 .section-highlight h2 {
  color: #456;
}

 

Styling Classes Field

 

The other option is to use the styling classes field which is present in all sections. What you can is create a custom class with some styling and then apply that class name to your section(s). This is powerful method as you can apply this one class to multiple sections without the need to use page-id-X class.

 

The best method is entirely your choice.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Ryan Logan

Makes perfect sense.  Thank you for the info...will def put it to use!  

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×