Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 8, 2015 at 9:12 pm #470546
    data76

    Hi

    My pages contain sidebars.

    I would like certain segments in my content to have different background images/colors.

    I have tried using your Color Section, but it stretches full width and pushes my sidebar down.

    Is there a way, perhaps not color section (or any other way), to enable me to add background images/colors to contents like the Color Section does, without affecting my sidebars?

    Thanks

    July 9, 2015 at 2:31 pm #470887
    Andy

    Hey data76!

    you can use a normal layout element instead and choose a background color for it (go for “Colors” when editing it). Then you can adjust it using CSS to make it full size, without disturbing your sidebar. Let us know when you still need help on it and show us exactly which element you want to adjust (screenshots will help, use imgur or dropbox).

    Best regards,
    Andy

    July 9, 2015 at 5:43 pm #471041
    data76

    Hi Andy. What I want is something like this

    View post on imgur.com

    In header 1, the background is of one colour, in header 2, the contents would be in another background colour.
    (client thinks its too “white” and dull, LOL)

    I can do this with Colour Section, but spoils the side bar.

    I am un sure what is this “normal layout element”. Can you explain further?

    Thanks!

    PS: I am using Enfold version 3.1.2

    July 9, 2015 at 5:51 pm #471051
    Yigit

    Hi!

    Please turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then give your element a custom CSS class. If you would like to change the background color of columns, please firstly update Enfold to the latest version 3.2.3 – kriesi.at/documentation/enfold/updating-your-theme-files/ and edit columns

    Cheers!
    Yigit

    July 10, 2015 at 12:09 pm #471402
    data76

    Hi,

    THanks Yigit. Never knew about the custom css field for alb elements haha

    However, i am intending to add background color behind the elements though. SOmething like this

    View post on imgur.com

    In this image, the header is in 1 column, the image and text are in 3 columns. behind is coloured. I am unable to do this without the Color Section used.

    Thanks!

    • This reply was modified 9 years, 5 months ago by data76.
    July 13, 2015 at 9:45 am #472198
    Andy

    Hi!

    please turn on custom class for all ALB elements as Yigit mentioned. Then you can define a custom background color to each layout section (not color section).
    When you are done you can give us admin access so we can help you further. Basically you would need to add something like this into Quick CSS field:

    .custom-css-name-for-layout-1 {
background-color: red;
}
.custom-css-name-for-layout-2 {
background-color: yellow;
}

    Cheers!
    Andy

    July 16, 2015 at 6:36 am #474081
    data76

    Hi Andy.

    I have done as you advised, but the colour background is only confined within the each layout column. I can’t expand to the back white spaces.

    That is because there is no place for me to add in codes to contain the layouts and add in the background colours. sigh.

    I have added in the user id and password for you to check. Anyway, the client is monitoring the site as well, so i am testing it with the Test page for the time being. (it is a multi site, and i am working on the 2nd site)

    Thanks

    July 16, 2015 at 10:46 am #474144
    Andy

    Hi!

    you could try to work with padding and margin to increase the background-color of each layout section. I changed the unique class names of each element, because they had all the same name before. So try something like this:

    .layout-1 {
padding: 15px !important;
padding-bottom: 112px !important;
}
.column-1 {
padding: 15px;
margin-right: -37px !important;
top: -50px;
width: 35% !important;
}
.column-2 {
padding: 15px;
top: -50px;
margin-left: 27px !important;
margin-right: 10px !important;
width: 35% !important;
}
.column-3 {
padding: 15px;
margin-left: -31px !important;
top: -50px;
width: 35% !important;
}

    You would need to play around with the values, until it fits your needs.

    Regards,
    Andy

    July 16, 2015 at 12:45 pm #474231
    data76

    THanks Andy.

    Will work on the CSS values. Thanks alot!

    However, when it comes to mobile viewing, the columns no longer stack up on a vertical row, but all three shrinks into 1 row.

    hmmm, will see how to work around this.

    July 16, 2015 at 1:33 pm #474268
    Andy

    Hey!

    you are welcome.

    I think this is normal behavior for mobile devices.

    Let us know if you still need help on this.

    Cheers!
    Andy

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.