PDA

View Full Version : CSS for Template ID verus Page ID

David Karol
11-20-2016, 03:33 PM
When editing templates based on page ID (.page10 as example), only that specific page item is affected. Other pages that share the same templates are not.

Is there a quick and easy way to hit a specific template instead, via CSS?
Replicant
11-21-2016, 02:23 AM
You can with javascript/jquery. There is a javascript object on every page called pageData. The pagetemplateid is in that array. You can find the pagetemplate id by right click, view source, find (Ctrl-f) pagetemplateid. So if you do something like this for pagetemplate 93

$(document).ready(function(){if (pageData['pagetemplateid']== '93');
$('body').css('background', 'red');
});


It would set the background css attribute red for the body tag. You can use #your-id or .your-class in place of body and change the css attribute to whatever you want to set.
David Karol
11-23-2016, 03:13 AM
Hi,

Thanks for replying. Are java queries like this able to be executed from inside additional.css? I added the code below, but don't see the equivalent result with avoiding the templateid check.

$(document).ready(function(){if (pageData['pagetemplateid']== '4');
$('#outer-wrapper').css(
'background-color', 'red');
});

On top of this, should multiple items be allowed in as below: .css('x','y') versus .css{('x','y'),('z','a')}
Replicant
11-23-2016, 10:17 AM
No. additional.css is just for css. Easiest way to add the script is in an ad module. Open site-builder, drag the ad module down on the page, paste the code above in the ad module editor enclosed in script tags. You can also add the code via template hook if you want it on every page.


<script>$(document).ready(function(){if (pageData['pagetemplateid']== '93');
$('body').css('background', 'red');
});
</script>


And on your second question, you almost had it in example two. The braces go between the parenthesis.

.css({
"background-color": "yellow",
"font-weight": "bolder"
})
noypiscripter
11-24-2016, 12:58 AM
It would be easier for the script to simply add a css class in the body tag based on the template id. Then use that class to style in css whatever elements on the page you want to style.

<script>$(document).ready(function(){
$('body').addClass('pagetemplate-', pageData['pagetemplateid']);
});
</script>

Then in CSS:

.pagetemplateid-93 #outer-wrapper {
background-color: red;
}
David Karol
11-24-2016, 11:40 PM
I added below code to a hook, run from header_head.

<script type="text/javascript">
$(document).ready(function() {
$('body').addClass('pagetemplate-', pageData['pagetemplateid']);
});
</script>

This results in an browser console error: "Cant find variable $". I tried to enclose everything in (function($)), which led to no more error. With that though, the pagetemplateID never made it into page source.

What does work is amending header template, line 146 as below:

<body id="vb-page-body" class="l-desktop page{vb:var page.pageid} vb-page view-mode{vb:raw isLoggedout}{vb:var state} pagetemplateid{vb:var page.pagetemplateid}" {vb:schema {vb:raw bodySchema}} {vb:raw group_data_attr}>
noypiscripter
11-25-2016, 09:10 PM
Because jQuery is not available at that point yet.

Use header_after_body_begin hook location with this script.

<script type="text/javascript">
document.body.className += ' pagetemplate-', pageData['pagetemplateid'];
</script>