Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #308315

    Hi,

    How do I edit the space occupied by a layout element. For example, looking at this demo page – http://kriesi.at/themedemo/?theme=enfold – there’s space around the three groups of text below the main layerslider. How would I decrease this?

    Thanks in advance.

    #308623

    Hey _Hegel!

    Thank you for using the theme.

    The 1/3 columns width can be change using this on Quick CSS or custom.css:

    div .av_one_third {
    margin-left: 2%;
    width: 32%;
    }

    You can find all column sizes on css > grid.css. Go this section:

    /* Columns for better content separation
    ================================================== */
    

    Cheers!
    Ismael

    #309806

    Hi, thanks a lot for your reply.

    Where do I find grid.css – can it me modified using the WP editor?

    #309807

    Hi!

    You can find it inside Enfold/css folder

    Cheers!
    Yigit

    #309828

    Hi,

    Thanks again!

    I guess that the file needs to be downloaded and edited locally?

    Also, viweing this page – http://www.travellersearth.com – perhaps you can tell me how to edit the height of the padding around the layer directly beneath the header.

    • This reply was modified 9 years, 7 months ago by _Hegel.
    #309833

    Hey!

    1- Yes you should download the file, edit it and then re-upload edited one.
    2- Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .page-id-9 .content {
    padding-top: 10px;
    padding-bottom: 10px;
    }

    Cheers!
    Yigit

    #309844

    That’s great – thanks a lot.

    So I take it that ‘.page-id-9 .content {‘ refers to that particular are I need to edit.

    Where would I find a list of all the relevant areas for future reference?

    #311014

    Hi!

    There’s no list but it’s not required because all modern browsers are bundled with element inspectors and developer tools which help you to find the right selectors. If you’re using Chrome this tutorial: http://discover-devtools.codeschool.com/ will help you. If you’re using Firefox I recommend to install the “Firebug” extension. This tutorial: http://www.woothemes.com/videos/how-to-use-firebug-to-modify-a-wordpress-theme/ shows you how to use it.

    Best regards,
    Peter

    #311813

    That’s very interesting – thanks for your reply.

    Perhaps you could tell me how I could quickly edit the space taken up to the left and right of text beneath the header – http://www.travellersearth.com . I’d like to make it so that the text spreads out more horizontally.

    #311833

    Hi!

    Please place your content above slider into a Color Section element with a unique ID ( http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png )
    and then add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed

    #your-custom-id .container { width: 95%; margin: 0; }

    Cheers!
    Yigit

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