Tagged: , , , , , , , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 14, 2013 at 12:08 pm #23237
    andypeck

    Hi there,

    PORTFOLIO

    Ive been trying everything but I cant seem to adjust the grid text font colors and the box background colours. Its inheriting the parameters from the Enfold Styling but I need to change it as its on a different background.

    As a test could it be totally be removed (thus leaving only a grid of images) and the descriptor text placed on a rollover in grid box itself (over the corresponding image)?

    In the Portfolio itself, where is the grid box rollover ‘curved arrow’ kept and can I change this for my own graphic?

    FOOTER

    Id like to put a decorative line (as used on the other codes for things like a portfolio grid etc) next to each Footer Widget. I have x3 widgets in the footer and each has a title. Id like a single line to extend to the right to fill the space to the right for the entire column width

    Cheers

    Andy

    May 15, 2013 at 1:47 pm #119034
    Devin

    Hi Andy

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    #top .grid-entry .inner-entry {
    
background: #333;
    
box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.2); /*border on portfolio items*/
    
}

    and

    #top .grid-entry-title {
    
background-color: #333; /*bg of title for portfolio item*/
    
color: #fff; /*color of title text*/
    
}

    The footer issue is most likely not possible without quite a bit of tweaking. Since each footer section doesn’t actually touch the one next to it, you would need to re-do that grid section to allow a line to extend past the edge of the actual widget.

    Regards,

    Devin

    May 15, 2013 at 4:16 pm #119035
    andypeck

    Thanks.

    The first bit is great although I think you may have not quite understood my question about the footer. I dont want a line to span across all three widgets as I realise that would require alot of work. What im after is to add a bit of decoration by applying a middle horizontal line after a widget title that ‘only’ spans the width of the individual widget. Therefore the end result would be WIDGET 1 TITLE followed by a decorative line….[Column GAP]….WIDGET 2 TITLE followed by a decorative line….[Column GAP]….WIDGET 3 TITLE followed by a decorative line.

    I want it to behave the same as the shortcodes you supply but obviously I appreciate this would be CSS code instead.

    Can you help?

    Cheers

    Andy

    May 16, 2013 at 12:38 am #119036
    Ismael

    Hi,

    Please try this

    .widgettitle {
    
border-bottom: 1px dotted white;
    
padding-bottom: 10px;
    
}

    It will create a dotted line below the widget title. For more border styles, please refer to this link

    http://www.w3schools.com/css/css_border.asp

    Regards,

    Ismael

    May 16, 2013 at 11:24 am #119037
    andypeck

    Thanks for getting back to me but what im after is a replica of what you use for a shortcode where the line extends to the right of the headline text.

    On the enfold demo site theres an example pages drop down and one of these is called ABOUT US. If you look, theres a heading called WELCOME AT OUR AGENCY and the type of line im referring to is there (next to it, flowing across to width of the column)

    How can I do this in the FOOTER WIDGET headings?

    Cheers

    May 17, 2013 at 4:17 pm #119038
    Nick

    Hi,

    That is an advanced layout editor component called Special Heading using the default style. http://www.clipular.com/c?6080052=hDO5fTzvwTw1FQ2vFXkx_-7KFKI&f=.png

    This is how it looks when you view source.

    <div style="padding-bottom:10px" class="av-special-heading avia-builder-el-1 el_after_av_portfolio avia-builder-el-last ">
    
<h1>Hello</h1>
    
<div class="special-heading-border">
    
<div class="special-heading-inner-border">
    
</div>
    
</div>
    
</div>

    So copy that block, open up footer.php and put it where you want. Just change the Hello part to whatever you need it to say.

    Thanks,

    Nick

    May 17, 2013 at 8:42 pm #119039
    andypeck

    Brilliant Nick… Ill give it a go.

    Big Thanks

    May 19, 2013 at 3:17 pm #119040
    Nick

    Hi,

    Actually add this to end of your functions.php file 

    add_filter('widget_title', 'my_change_title');
    

    
function my_change_title($title='') {
    
$ttitle = "<div style="padding-bottom:10px" class="av-special-heading avia-builder-el-1 el_after_av_portfolio avia-builder-el-last ">";
    
$ttitle .= "<span class="widget-title">$title</span>";
    
$ttitle .= "<div class="special-heading-border">";
    
$ttitle .= "<div class="special-heading-inner-border">";
    
$ttitle .= "</div>";
    
$ttitle .= "</div>";
    
$ttitle .= "</div>";
    
return $ttitle;
    
}

    Thanks,

    Nick

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Footer Decoration Lines & Portfolio styling’ is closed to new replies.