If we fail to anticipate the unforeseen or expect the unexpected in a universe of infinite possibilities, we may find ourselves at the mercy of anyone or anything that cannot be programmed, categorized or easily referenced.

August 09, 2007

Neo type borders around individual page elements



I used to tinker around how it was possible to do this. I finally managed to figure out how to do this after a blogospy on Hackosphere.

Now it seems I may not be the only one who needed to do this. Charles Rey I hope this helps.




The first thing to do is to identify the widget ID of the page element. If it is the first TEXT page element the ID is usually TEXT1, if the second TEXT2 and so on, The same for HTML, if the first ID=HTML1, second HTML2 and son on.

e.g. widget id='HTML4' locked='false' title='' type='HTML'
e.g. widget id='HTML10' locked='false' title='' type='HTML'

(As you can see the widget titles are blank, this is the down side of not having titles on page elements)


If the numbers are confusing the title of the page element will help determine which one you want.

e.g. widget id='LinkList1' locked='false' title='Links' type='LinkList'
e.g. widget id='Label1' locked='false' title='Labels' type='Label'


After determining the target widget ID then see which column it is in. If the page element is in the middle column I just copy and paste the CSS code for the LabelDisplay and paste it just blew and then I change the widget ID to the intended page element ID

(for my blog it looks like this)

#LabelDisplay {
margin-top: 10px;
padding: 0 5px 0 10px;
border-top: solid #b0b0b0 0.1px;
border-left: solid #191919 0.1px;
border-right: solid #191919 0.1px;
background: #333333;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

Copy and paste just below so that it will look similar in structure to this. (replace the second ID with the target page element ID) :

LabelDisplay {
margin-top: 10px;
padding: 0 5px 0 10px;
border-top: solid #b0b0b0 0.1px;
border-left: solid #191919 0.1px;
border-right: solid #191919 0.1px;
background: #333333;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

#Page Element ID {
margin-top: 10px;
padding: 0 5px 0 10px;
border-top: solid #b0b0b0 0.1px;
border-left: solid #191919 0.1px;
border-right: solid #191919 0.1px;
background: #333333;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

When you save this template. The target page element will now have the same border wrapping as the label display.

The same method will work for elements on the right margin but you choose , say the #profile1 CSS code as template for your page element instead.. If it is in the main column then choose the #Post CSS code as template.

I have not tried it any other way but feel free to experiment after all this is blogospy!

No comments yet