Visually separate positions on the page
-
-
- Dkvman
- Hero Rocketeer
- Posts: 390
- Thanks: 0
-
The url is in secure tab and edited below
I have tried a few methods but they do not work they way I would like.
Color separation is just too ugly with my colors.
I tried putting a particle in but it assumes the background color of the position from the sty;es tab of the template
It would work if I could make the particle or even a module be full width and be able to control the background color or use a background image
I used this code .divider1 {background: #000 url( mysite.com/images/affiliate-program-butt...2-450px.png?576c5d48 ) 100% no-repeat;}
It does work to show the background color #000 and the background image but does not show it full width you can see in the screencap link below
gyazo.com/21bf9540d5c7db8dce1c195ae8a8f08b
Thank you
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
Try this code:
.divider1 { background: #000 url('http://homehighschoolhelp.com/images/affiliate-program-button-02-450px.png?576c5d48') 100% no-repeat; background-position: left top; background-size: cover; } - Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Dkvman
- Hero Rocketeer
- Posts: 390
- Thanks: 0
-
That is closer Damir however it only covers the center it does not cover the blue area too.
I beleive that blue area is being pulled from the stytles tab of the template for that position.
gyazo.com/769901817d76a1aca3eb694651a6e90c
Maybe it would be easier to just make the title be full width for each module or particle.
Then every section would be visibly separated.
For instance the Testimonial title see the title there in black font in the screencap below
gyazo.com/b20470d42f1115c0bcfa2ccef30d8923
I could assign a class to that module like "testititle" and add something like your code in the custom css?
Something like this but of course the bluebackground would go full width.
gyazo.com/ccce670d38ff59582dd97ed21ed860f7
.g-title {
background: blue 100%;
} - Last Edit: 8 years 9 months ago by Dkvman.
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
- Tell me how you need it and i will provide the code ... make a sketch maybe...
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Dkvman
- Hero Rocketeer
- Posts: 390
- Thanks: 0
-
I used this to get the color right but width is not fullwidth
.g-title {
background: #0897c3;
}
I want to be able to put this between each positio nas a divider.
Here is my drawing
gyazo.com/54d5fc33bfb2c84262244b5bf2a6cd5a
Thank you
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
Try this code:
.title-center.testipart .g-title { background: #0897c3; padding: 25px; margin: 0 -100% 2rem; color: #ffffff; }
To add custom style sheet to Gantry 5 Framework please follow these instructions:
docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
or if you want to add them in the Page Settings:
docs.gantry.org/gantry5/configure/page-settings#custom-css-js - Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Dkvman
- Hero Rocketeer
- Posts: 390
- Thanks: 0
-
Thank you that would work fine.
Would I just add ".title-center.testipart .g-title" to the module class suffix?
If I wanted this in a few different places on the home page would I just alter the module class suffix for each module?
For example:
module 1 class suffix would be ".title-center.testipart .g-title"
module 2 class suffix would be ".title-center.testipart2 .g-title"
module 3 class suffix would be ".title-center.testipart3 .g-title"
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
Nope it will not work because you dont have the code for it in the css but if you make something like this then it will work:
.title-center.testipart .g-title, .title-center.testipart2 .g-title, .title-center.testipart3 .g-title { background: #0897c3; padding: 25px; margin: 0 -100% 2rem; color: #ffffff; } - Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
Time to create page: 0.075 seconds