Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 24, 2016 at 7:23 pm #677198
    dannywouters21

    What I want is a simple box taking up about 80% of the section width, 30px high, centered, with grey background and white text. I just want to use this on pages as a separator to define content sections more clearly.
    If I try this by changing the theme styling it also changes everything else on my pages, dont want that..
    how can this be accomplished? I thought it seemed like a simple task..
    example page:

    Extra Large Heat Treat Furnace

    I tried using text box, table, grid, color section, notification.. none can accomplish this..

    August 24, 2016 at 8:26 pm #677229
    Vinay

    Hey dannywouters21,

    It’s not clear what you are trying to achieve. However if you like to target specific layout builder elements and make css changes please enable custom css class name support http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    If you still need help would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)

    Best regards,
    Vinay

    August 24, 2016 at 8:58 pm #677240
    dannywouters21

    Hi Vinay,
    Thanks for the reply. I enabled the custom css class for the child theme per your link, it is available now.
    What I’d like to do is similar to the grey text box in the pic here that says “RELATED PRODUCTS”, but I’d like the text to be white, the box to be about 80% wide of the div it’s in, and the height to be about 40px. Which content element should I use to do this and can you help with the custom css for that element? assume the custom css class name is dw-box. Thanks!

    View post on imgur.com

    August 26, 2016 at 5:26 am #677925
    Vinay

    Hi,

    Thank you for the clarification :) Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .dw-similar-products {
	max-width:80%;
	background: #ccc;
	left:50%;
	transform:translate(-50%);
	margin:0 0 30px 0;
	padding:10px;
	min-height:40px;
}

    The above code should make the similar products look like your example please feel free to change the color values to suit your design :)

    Best regards,
    Vinay

    August 26, 2016 at 3:27 pm #678172
    dannywouters21

    Thank you Vinay, that works great for the “special heading” content block!
    I tried to apply this class to a text block (bc more flexibility) but then the block aligns all the way to the left, how can it be centered?
    Regards

    August 31, 2016 at 4:26 am #679778
    Ismael

    Hey!

    If you’re using the text block, you can center align the text inside. Add the “aligncenter” class attribute to the element.

    Cheers!
    Ismael

    September 1, 2016 at 4:42 pm #680829
    dannywouters21

    OK I was able to adapt the css to work with a text box, you can close this topic thanks!

    September 1, 2016 at 9:53 pm #680983
    Vinay

    Hi,

    Glad we could help!
    We really appreciate it if you rate our theme on themeforest .
    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘setting text box background color and margins’ is closed to new replies.