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!
6 comments:
Thanks for this. I've always been impressed with Ramani's Neo template, but found the inner workings to be somewhat intimidating. This was an element I've always wanted to implement, but could never figure out how. Thanks again.
thanx 4 the comment...hope to see you around...
Man am I slow! I got it though. Thanks a bunch Diddy.
Now I just have to figure out what I should change that pale blue color to. Or maybe I should change the off white instead...
I should also mention that for some reason my boarders go the leagnth of the whole column as opposed to stopping at the end of one page element and beginning at the next. Any thoughts?
sounds like you have border setting around sidebar/newsisdebar wrapper(s).
What you need to do is to define the border width of the wrapper as 0px( this is much safer than removing the brder itself...unless you know you will never need it).
If changing the width alters page configuaration then remove the colour of the border instead and just leave it blank ("%%%%%" to "")this will just make the border invisible
If that does not work can u post your template to me so I can have a look?
did a blogospy...here is the guilty party
.sidebar {
color: #aa9b55;
line-height: 1.5em;
border-left: solid #808073 1.5px;
border-right: solid #808073 1.5px;
background: #330000;
-moz-border-radius: 15px;
-webkit-border-radius: 300px;
}
Post a Comment