[Support request] select a specific section using the Simple CSS plugin

[Stafer]

Hi, I would like to know how to select a specific section using the Simple CSS plugin.

I’ve seen something like # generate-section-1. but I do not know how to do it.

I intend to use a custom CSS for a section and wanted to select it. every time I have the css it applies to all sections.

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

Hi there,

Using is ID method you suggested is defintely the right method if you only want to change it to that specific section.

It should be something like:

#generate-section-2 h2 {
    color: #000000;
}

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Stafer]

I want to apply these codes in section 9;

body{
padding-top:30px;
}
.slider-wrap{
width:616px;
height:120px;
border:1px solid #ccc;
margin:0 auto;
box-shadow: 0 0 10px #000;
border-radius:5px;
overflow:hidden;
}
img, .slider-boxes{
width:120px;
height:120px;
}
.slider-boxes{
display: inline-block;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.slider-boxes:hover{
-webkit-transform: scale(1.30);
transform: scale(1.30);
box-shadow: 0 0 10px #000;
}

show me how to do

[Stafer]

when I use it it applies to the whole page.

[David]

Hi there,

on the Settings Tab of the Section you will see a Custom Classes field. Add a unique class to this field eg. my-slider-section this could be whatever you want but must be unique.

Then you’re CSS would look like this:

.my-slider-section .slider-wrap {
    width: 616px;
    height: 120px;
    border: 1px solid #ccc;
    margin: 0 auto;
    box-shadow: 0 0 10px #000;
    border-radius: 5px;
    overflow: hidden;
}

.my-slider-section img,
.my-slider-section  .slider-boxes {
    width: 120px;
    height: 120px;
}

.my-slider-section .slider-boxes {
    display: inline-block;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.my-slider-section .slider-boxes:hover {
    -webkit-transform: scale(1.30);
    transform: scale(1.30);
    box-shadow: 0 0 10px #000;
}

You can then re-use the my-slider-section class on any section that requires the same styling.

the body selector applies to the entire site so you cannot apply it only to a Section. You can adjust the top and bottom padding in the Settings tab of that particular section.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts