Not signed in ( Sign In)

Categories

Welcome, Guest

Want to take part in these discussions? Sign in if you have an account, or apply for one below

Vanilla 1.1.10 is a product of Lussumo. More Information: Documentation, Community Support.

    •  
      CommentAuthorlantaca
    • CommentTimeApr 7th 2010
     permalink
    I'm working on a new theme: iGlass or in italian IoVetro! (based on Leggero Style)

    I would to add a top and bottom border on widget

    Now i have only a background for colunm but i don't be able to add the border top and bottom
    I try to add a div before and after the div of the widget but is not the solution....
    i try to make a table (without div) for the widget, but is not the solution....

    Have someone an ideas?
    •  
      CommentAuthorStanley
    • CommentTimeApr 9th 2010
     permalink
    Is this for all widgets, or just one in particular.

    If it's just for one you could name it in your stylesheet, I suppose. I just did a quick test of the following and it worked (just using inline style).

    <div id="widget-searchbox" style="border-top:2px solid; border-bottom:3px double">
    •  
      CommentAuthorlantaca
    • CommentTimeApr 9th 2010
     permalink
    ok, thanks.
    But, if i want to ad an image for border?

    top image border
    background image border
    bottom image border
    for all or just one

    what can i do?
    •  
      CommentAuthorStanley
    • CommentTimeApr 12th 2010
     permalink
    There is a border-image setting in CSS3, though obviously this isn't supported by all browsers. But it should work in the latest versions of FireFox, Opera & Safari. The linked page only mentions FF & Safari, but it also works in Opera V10.5 for sure. Not sure about Internet Explorer as I don't use it.
    •  
      CommentAuthorlantaca
    • CommentTimeApr 12th 2010
     permalink
    thank you Stanley.
    In CSS3 there are rounded corner also but there are no browser that support the new features.

    I have solved my problem so
    <div id="column">
    {widgets pos=left}
    <div id="{$id}">
    <table class="widget">
    <tr>
    <td class="widget-top"><h4>{$subject}</h4></td>
    </tr>
    <tr>
    <td class="widget-sfondo">
    {$content}
    </td>
    </tr>
    <tr>
    <td class="widget-bottom"></td>
    </tr>
    </table>
    </div>
    {/widgets}
    </div>


    I have introduced a table for design the widget and it works fine
    In a first moment i think i have make some errors

    You can see the result on my blog this evening
    •  
      CommentAuthorStanley
    • CommentTimeApr 13th 2010
     permalink
    Posted By: lantacaIn CSS3 there are rounded corner also but there are no browser that support the new features.


    Well, I know that the latest version of Opera now supports border-radius, and also both FireFox & Safari have done for a while, but you used to have to put the -moz- & -webkit- prefixes to the border-radius property. I'm not sure if they now support the official CSS3 version.

    On the same web site I linked to earlier they have a border-radius example, and they have quite a lengthy set of rules to make it work in a few different browsers, e.g. border-radius: 10px; -o-border-radius: 10px; -icab-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; (note that this is what they actually have in the source code - which has more bits to it than what they actually give in the example code shown below the example)

    I know that the -o- prefix was intended for Opera, but it was never used - and Opera now supports just the border-radius setting (so the -o- version isn't needed), but I'm not sure what the -icab- and -khtml- versions are (maybe IE & Konquerer?), but I'm sure you could use their examples to cater for quite a few of your visitors - and fall back to using your rounded corner images for people who are still using older browsers.

    Your site looks great, by the way, I want to go for a swim!
    •  
      CommentAuthorlantaca
    • CommentTimeApr 14th 2010 edited
     permalink
    ok, stanley... ;-)
    i try to make iGlass only with css.
    But only for chomium (i love Iron browser)
    so, good job to me :-)
    •  
      CommentAuthorStanley
    • CommentTimeMay 2nd 2010
     permalink
    With reference to the rounded corners, I found another way to do this at dhtmlgoodies.com if it's of any use to you.
    •  
      CommentAuthorlantaca
    • CommentTimeMay 4th 2010
     permalink
    thank you stanley, but i want to realize a theme based only on CSS, without other excamotage :-)

    the theme is ok for me, i hope in IE9... and i use chrome