Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #392407

    I want to make some side-by-side boxes with heading, image, text, bg color, margins, rounded corners. Is there a better way than to use technique in link below and then write ccs for each box?

    http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Thanks

    #392559

    Hey rdswestnet!

    If you need to build some custom designs then that would probably be the best way. Another way would be to use the codeblock element and just type out your HTML and CSS inside that.

    Cheers!
    Elliott

    #392814

    NEVER MIND. Very Sorry, After I edited the CORRECT functions.php file it worked. Thanks

    What is the exactly the correct way to add the line of code to functions .php? Clearly I don’t know how to do this correctly:
    Thanks

    At the very bottom of functions.php I added this:

    /** this is added to functions.php so that a box to write a unique seelctor appears on evey element */

    add_theme_support(‘avia_template_builder_custom_css’);

    Fatal error: Call to undefined function add_theme_support() in /home/admin8sdrk/public_html/wp-includes/functions.php on line 4815

    I also tried this

    /** this is added to functions.php so that a box to write a unique seelctor appears on evey element */

    function add_theme_support(‘avia_template_builder_custom_css’);

    And got different error

    Parse error: syntax error, unexpected ”avia_template_builder_custom_’ (T_CONSTANT_ENCAPSED_STRING), expecting ‘&’ or variable (T_VARIABLE) in /home/admin8sdrk/public_html/wp-includes/functions.php on line 4815

    • This reply was modified 9 years, 9 months ago by rdswestnet.
    #392817

    NEVER MIND this issue. But I still need some help w/margin please see most recent post

    • This reply was modified 9 years, 9 months ago by rdswestnet.
    #392851

    I still need a bit more help with margins.

    Here is the page I am experimenting with, with the box elements I want to create:
    http://sandiegoroadkill.com/test-theme-support/
    Those are 3 cells in a grid row and I am styling all three with selector top .rs_cell_one_test

    Here is my css:
    #top .rs_cell_one_test {
    border: 3px solid #aaa;
    border-radius:10px;
    margin:30px 5px;
    width:290px;
    }

    The problem is neither the margin or width properties seem to have any effect. I want to make white space between cells when side by side and have each element fill the screen when stacked, with some white space between them vertically. Sorry if I am overlooking some simpler way to make such elements.

    Thanks Much

    Rob

    #393037

    Hey!

    This is how your page looks like on my end – http://i.imgur.com/aVYWEVp.png
    I can see that custom CSS you have added is being applied fine as well. If you have not figured it out yet, can you please post a screenshot and show the changes you would like to make so we can make sure to be on the same page?

    Regards,
    Yigit

    #393328

    Hey Yigit. Thanks for the fast reply.

    I can’t exactly make a screenshot because I can’t get the results I want. So I made a mockup in photoshop and posted it at http://sandiegoroadkill.com/test-theme-support/ (upper image). It’s the margin property I am having trouble with, as well as width property. I want to be able to create some white space between cells, but I can’t

    Here is a link to a page I made with another theme. I’d like the boxes to behave exactly like that. ie preserve about the same margin space at all screen widths. http://peak-fp.com/services/

    Enfold is such an advanced and powerful theme it always surprised me that it does not have a box element. Or maybe it does and I just don’t know how to use it. Thanks, Rob

    #393842

    Hi!

    It sounds like your wanting to use our column shortcodes instead. 1/3 + 1/3 + 1/3 column layout will display just like in your first image.

    Cheers!
    Elliott

    #394122

    Hmm. Is there a way to style an individual column? If so how please? Or do you mean to stack text-image-text in a column and style each element separately? Please check out http://sandiegoroadkill.com/test-theme-support/ top row. I somewhat did that. The element reacted a bit oddly to some of the css. Do you think that element will not break?

    Is there really no way to add margin between cells in a grid row? It would be so much easier plus you can add a background image. That would be my first choice if you can think of a way to add white space between cells. Thanks

    #394673

    Hi!

    As far as I can tell it looks fine on my end. Your adding some custom CSS to the elements inside the color section to change the backgrounds, borders, and border radius. That will work.

    Regards,
    Elliott

    #394732

    OK, Thanks

    If you don’t mid taking a last look at http://sandiegoroadkill.com/test-theme-support/ The one thing that makes me a bit uncomfortable is that if I don’t specify borders between each stacked elements I get spaces as seen in the last box on the right, even tho I have set the margins to 0. My css is below you can see how I specified invisible borders in the other 2 elements. Seems to work in all browsers I just hate to depend on code i can’t understand.

    Thanks Much

    Rob

    #top .rs_test_col_top {
    background-color: #ddae68;
    border-top:2px solid #aaa;
    border-right:2px solid #aaa;
    border-bottom:2px solid #ddae68;
    border-left:2px solid #aaa;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin:0;
    }

    #top .rs_test_col_top h3 {
    padding:15px 20px 5px 20px;

    }

    #top .rs_test_col_mid {
    background-color: #ddae68;
    border-right:2px solid #aaa;
    border-left:2px solid #aaa;
    padding: 0 35px 0 35px;
    margin:0;

    }

    #top .rs_test_col_bot {
    background-color: #ddae68;
    border-top:2px solid #ddae68;
    border-right:2px solid #aaa;
    border-bottom:2px solid #aaa;
    border-left:2px solid #aaa;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    margin:0;
    }

    #top .rs_test_col_bot p {
    padding:5px 20px 5px 20px;
    }

    /* column 1 above*/

    #top .rs_test_col2_top {
    background-color: #dd4f4f;
    border-top:2px solid #aaa;
    border-right:2px solid #aaa;
    border-bottom:2px solid #dd4f4f;
    border-left:2px solid #aaa;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin:0;
    }

    #top .rs_test_col2_top h3 {
    padding:15px 20px 5px 20px;

    }

    #top .rs_test_col2_mid {
    background-color: #dd4f4f;
    border-right:2px solid #aaa;
    border-left:2px solid #aaa;
    padding: 0 35px 0 35px;
    margin:0;
    }

    #top .rs_test_col2_bot {
    background-color: #dd4f4f;
    border-top:2px solid #dd4f4f;
    border-right:2px solid #aaa;
    border-bottom:2px solid #aaa;
    border-left:2px solid #aaa;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    margin:0;
    }

    #top .rs_test_col2_bot p {
    padding:5px 20px 5px 20px;
    }

    /* column 2 above*/

    #top .rs_test_col3_top {
    background-color: #4486bf;
    border-top:2px solid #aaa;
    border-right:2px solid #aaa;

    border-left:2px solid #aaa;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin:0;
    }

    #top .rs_test_col3_top h3 {
    padding:15px 20px 5px 20px;

    }

    #top .rs_test_col3_mid {
    background-color: #4486bf;
    border-right:2px solid #aaa;
    border-left:2px solid #aaa;
    margin:0;
    padding: 0 35px 0 35px;
    margin:0;
    }

    #top .rs_test_col3_bot {
    background-color: #4486bf;

    border-right:2px solid #aaa;
    border-bottom:2px solid #aaa;
    border-left:2px solid #aaa;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    margin:0;
    }

    #top .rs_test_col3_bot p {
    padding:5px 20px 5px 20px;
    }

    /* column 3 above*/

    • This reply was modified 9 years, 9 months ago by rdswestnet.
    #395268

    Hey!

    On this part,

    #top .rs_test_col3_top h3 {
      margin-bottom: 0;
      padding: 15px 20px 5px;
    }

    Set the bottom margin to 0 (i added it in) and then increase the bottom padding a bit.

    And the bottom white space is from your paragraph which has a top margin being applied. You’ll want to switch that to top padding instead.

    Best regards,
    Elliott

    #395293

    Thank You Elliot!! You cam mark this thread closed. Now that I can make this element I think I can use Enfold for almost any project.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘boxes with text, images etc.’ is closed to new replies.