Web CMS Designs: Forums
 

 
Post new topic Reply to topic
Message
Display posts from previous:       
PostPosted: Mon Aug 06, 2012 10:10 am
Reply with quote Back to top
spasticdonkey
Newbie
Newbie
Joined: Nov 18, 2010
Posts: 106
Location: Texas

View user's profile Send private message Visit poster's website
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.

php Code:
function themesidebox($title, $content, $bid='') {

echo '
<div class="block">
<div class="block_gradient">
<div class="block_top"><div><h3>'.$title.'</h3></div></div>
</div>
<div class="block_content">
'.$content.'
</div>
<div class="article_bot"><div>&nbsp;</div></div>
</div>
';
}

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:
php Code:
function themesidebox($title, $content, $bid='') {

static $nobid;
if (empty($title)){
$btitle = '&nbsp;';
} else {
$btitle = $title;
}
if (!empty($bid)){
$BlockID = 'sideblock'.$bid;
} else {
if (isset($nobid)){
$nobid++;
} else {
$nobid=1;
}
$BlockID = 'otherblock'.$nobid;
}
echo '
<div class="block" id="'.$BlockID.'">
<div class="block_gradient">
<div class="block_top"><div><h3>'.$btitle.'</h3></div></div>
</div>
<div class="block_content">
'.$content.'
</div>
<div class="article_bot"><div>&nbsp;</div></div>
</div>
';
}

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)

css Code:
#sideblock45{

/*do stuff*/
}

Or maybe some jQuery
php Code:
$("#sideblock45").css("border","3px solid red");


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.

Also note there is are fair amount of info on RavenNuke2:Block Functionality and Styling on the RN wiki
http://rnwiki.ravennuke.com/wiki/RavenNuke2:Block_Functionality_and_Styling
spasticdonkeywebcmsdesigns
 
PostPosted: Mon Aug 06, 2012 11:40 am
Reply with quote Back to top
nextgen
Newbie
Newbie
Joined: Aug 05, 2012
Posts: 49
Location: Maryland

View user's profile Send private message Send e-mail Visit poster's website Yahoo Messenger MSN Messenger
Very helpful friend. Anytime i read any documentation of yours i learn. Just one more way to make your nuke site your own.
nextgenwith Kindness comes many rewards.
 
PostPosted: Wed Aug 08, 2012 7:14 am
Reply with quote Back to top
spasticdonkey
Newbie
Newbie
Joined: Nov 18, 2010
Posts: 106
Location: Texas

View user's profile Send private message Visit poster's website
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 Wink
spasticdonkeywebcmsdesigns
 
PostPosted: Wed Aug 08, 2012 7:34 am
Reply with quote Back to top
nextgen
Newbie
Newbie
Joined: Aug 05, 2012
Posts: 49
Location: Maryland

View user's profile Send private message Send e-mail Visit poster's website Yahoo Messenger MSN Messenger
well now i can do the same if ever it is brought up.
nextgenwith Kindness comes many rewards.
 
PostPosted: Thu Sep 06, 2012 7:31 am
Reply with quote Back to top
spasticdonkey
Newbie
Newbie
Joined: Nov 18, 2010
Posts: 106
Location: Texas

View user's profile Send private message Visit poster's website
I put together an example of one thing you could use unique block id's for, the Sticky Scroll block
http://web-cms-designs.com/ftopict-30-sticky-scroll-block-for-ravennuke.html
spasticdonkeywebcmsdesigns
 
Post new topic Reply to topic Web CMS Designs Forum Index RavenNuke Blocks
Your AccountNew Members
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
You cannot attach files in this forum
You cannot download files in this forum


Powered by phpBB © 2001-2008 phpBB Group
 
 
Code Authors