Creating a unique CSS ID that can be associated with a given block allows you to target specific blocks via CSS, or to add JavaScript functionality; such as hiding a block if JavaScript is disabled, presenting a block in a Colorbox modal, or just about whatever else you can dream up with JavaScript.
While this is a block related "tweak" you will actually need to edit your
theme.php
. If you run multiple themes you will need to edit them all so that the ID's are the same for all themes, but I'll touch on that in a moment.
I'll be editing the
themesidebox
function for this example, but you could certainly add to the
themecenterbox
function as well. Below is the unmodified
themesidebox
function from the RavenIce (v2.5) theme; which you may notice differs slightly from the prior version (v2.4) or the
themesidebox
function of 3rd party themes.
First off, your function
themesidebox
may look like
function themesidebox($title, $content)
which will need to be changed to
function themesidebox($title, $content, $bid='')
if it does.
Without getting too technical, the value of
$bid
is available internally from the calling function
render_blocks
, which is how the left and right block columns are actually populated. Since we know that each block id is unique and can be associated with a specific block, it's perfect for generating a CSS ID. These are the same ID numbers you see in URLs when editing a block, btw.
yoursite.com/admin.php?op=BlocksEdit&bid=45
Before we edit the
themesidebox
function there are a couple more considerations. A CSS ID cannot start with a number, so I'll be prefixing the ID with
sideblock
- but you can use whatever you wish as long as it is valid. So for the example URL above you would have an ID of
sideblock45
Also, there are a few occasions where the
themesidebox
function is called directly, such as the Survey module to create a simulated side block, so you need to account for an empty
$bid
as those "blocks" have no ID's. Since you cannot have an empty ID or two occurrences of the same ID, we will use the static value
$nobid
to help keep track of things. Blocks without ID's will have ID's of
otherblock1
and auto-increment from there.
One other tweak included that allows for an empty block title which would usually produce validation errors for empty html tags
The finished example function:
So from there you should have unique CSS ID's that relate directly to the block ID's as used in the Blocks ACP. You can also find the ID for a specific block from viewing your db tables in phpmyadmin. Find the ID of the block you want to target, and you can style it (for example block 45)
Or maybe some jQuery
A reminder to make sure to perform the edit to all active themes if you want any JavaScripts or CSS styling to work in other themes.
I'll get back in the coming days with some cool little example of things you can do once you have these ID's. For instance I used a CSS ID to accomplish the "Sticky Scroll" effect with the Twitter block seen here. Notice how it will follow you down the page as you scroll to bottom... Although only if your viewport is greater than 540px high.
Very helpful friend. Anytime i read any documentation of yours i learn. Just one more way to make your nuke site your own.
Posted:
Wed Aug 08, 2012 7:14 am
spasticdonkey Newbie
Joined: Nov 18, 2010
Posts: 106
Location: Texas
Thanks. The fact I'm able to help out with some things here and there is really a testament to the many people who have helped me learn over the years. In no small part the community over at RavenPHPScripts http://www.ravenphpscripts.com
Just "Paying it Forward" as they say... and I can't take full credit for the concept above as it was a result of internal discussions with other RN team members
Posted:
Wed Aug 08, 2012 7:34 am
nextgen Newbie
Joined: Aug 05, 2012
Posts: 49
Location: Maryland
well now i can do the same if ever it is brought up.
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum