Author Topic: Call CSS from the Theme to a block? (Read 11319 times)

FireDitto · « **on:** January 12, 2014, 05:03:41 AM »

Is it possible to call forth a CSS file to display in a block, so as that it can be personalised to fit each theme?

Eg;

I have a block for an accordion, and I want to put hte CSS file for it in the theme files (Themes/ThemeName/css/accordion.css)

How would I do that?

Cal · « **Reply #1 on:** January 13, 2014, 09:08:13 AM »

You can add a custom body class to the block's settings, and then in your theme files you can have styles set up for .blockclass and all its descendants.

AngelinaBelle · « **Reply #2 on:** January 13, 2014, 01:50:56 PM »

FireDitto -- did that answer your question?

The easiest way to get that custom CSS into your block is to put it into one of the CSS files already being loaded. That means either the main CSS file for your theme, or else the portal.css which only loads when simpleportal is running.

Then you can specify a custom body class to invoke the custom CSS rules you want to use for this special block.

FireDitto · « **Reply #3 on:** January 14, 2014, 05:00:51 AM »

Ahh, yes and no. Could you possibly give examples? I think that went in one ear and danced around laughing at me to pop out the other one x.x

Cal · « **Reply #4 on:** January 14, 2014, 10:45:20 AM »

Sure thing! Here I have a header block in floated up in the title bar. This is a standard PHP block except my style options in Admin->Blocks looks like this:

Then, in my theme's index.css, I have styles specified for .spotlight that change the entire look of the block as well as its positioning.

AngelinaBelle · « **Reply #5 on:** January 15, 2014, 07:08:21 PM »

... and the other half of it is getting the CSS into one of your existing CSS files in the first place.

Can you possibly share some of your custom CSS you want to use, so we can advise you on whether it is ready to go or needs a little work?

FireDitto · « **Reply #6 on:** January 18, 2014, 08:17:44 AM »

Quote from: AngelinaBelle on January 15, 2014, 07:08:21 PM

... and the other half of it is getting the CSS into one of your existing CSS files in the first place.

Can you possibly share some of your custom CSS you want to use, so we can advise you on whether it is ready to go or needs a little work?

Are you talking to me, or Cal? Because I'd honestly like to see Cal's CSS portion so I have some idea of what I would need to be doing. Or at least a generic example, because I'm drawing blanks at the moment (it is also midnight and I'm exhausted which may not help.)

At any rate, this is the first chance I've had to look back on this site, so I haven't had the chance to play with the CSS or anything at all yet.

AngelinaBelle · « **Reply #7 on:** January 18, 2014, 05:39:06 PM »

FireDitto,
Please attach your custom CSS file. I think you are going to have to add some of that custom CSS to one of the CSS files that SMF or SimplePortal already specifies. Anyone with a little CSS experience should be able to help you get started with that.

FireDitto · « **Reply #8 on:** January 19, 2014, 04:14:40 AM »

I haven't played with it at all. I wanted to know it was possible to customise it per-theme before I bothered doing so xD

Anyway, this is the code I currently have in an HTML block:

Code: [Select]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Header Block</title>
<style>
body {
	margin: 0;
}

#container {
	margin: 20px auto;
	width: 980px;
}

#accordion {
	list-style:none;
	margin:30px 0;
	padding:0;
	height:270px;
	width:980px;
	margin:0 0 0 11px;
	border:2px solid #000000;
	overflow:hidden;
}
.panel {
	float:left;
	display:block;
	height:270px;
	width:44px;
	overflow:hidden;
	color:#666666;
	text-decoration:none;
	font-size:16px;
	line-height:1.5em
}
.panel.active {
	width:848px
}

.panelContent {
	padding:15px 15px 15px 55px;
	height:240px;
	width:778px;
}
.pink {
	width:42px;
	height:270px;
	float:left;
	background:url(../images/accordionSprite.png) no-repeat 4px 85px #f980a1;
	border-right:2px solid #ffffff;
	cursor:pointer
}
.dark1 {
	background:url(../images/accordionSprite.png) no-repeat -58px 85px #e66486
}
.dark2 {
	background:url(../images/accordionSprite.png) no-repeat -117px 86px #cf4266
}
.dark3 {
	background:url(../images/accordionSprite.png) no-repeat -184px 87px #b71f45
}
.last {
	border:none
}
.p1 {
	background:url(../images/panel1.jpg) no-repeat left top
}
.p2 {
	background:url(../images/panel1.jpg) no-repeat left top
}
.p3 {
	background:url(../images/panel1.jpg) no-repeat left top
}
.p4 {
	background:url(../images/panel1.jpg) no-repeat left top
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script>
$(document).ready(function(){
 
    activePanel = $("#accordion div.panel:first");
    $(activePanel).addClass('active');
 
    $("#accordion").delegate('.panel', 'click', function(e){
         if( ! $(this).is('.active') ){
			$(activePanel).animate({width: "44px"}, 300);
			$(this).animate({width: "848px"}, 300);
			$('#accordion .panel').removeClass('active');
			$(this).addClass('active');
			activePanel = this;
		 };
    });
});
</script>
</head>
<body>
<div id="container">
<div id="accordion">
    <div class="panel">
      <div class="pink"></div>
      <div class="panelContent p1"> <strong>Section 1 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </div>
    </div>
    <div class="panel">
      <div class="pink dark1"></div>
      <div class="panelContent p2"> <strong>Section 2 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </div>
    </div>
    <div class="panel">
      <div class="pink dark2"></div>
      <div class="panelContent p3"> <strong>Section 3 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </div>
    </div>
    <div class="panel">
      <div class="pink dark3"></div>
      <div class="panelContent p4"> <strong>Section 4 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </div>
    </div>
</div>
</div>
</body>
</html>

Cal · « **Reply #9 on:** January 19, 2014, 09:00:13 PM »

Take everything between <style></style> out of your HTML block and put it in Theme/whatever/css/index.css, and you can then change it up per theme. You don't even need to do any of the custom body class stuff since you're not styling an individual block to look different from other blocks, you're styling what's in the block itself.

AngelinaBelle · « **Reply #10 on:** January 19, 2014, 09:13:01 PM »

Yes, you can customize this per-theme. That's the short answer. The longer answer is how to do it.

First -- your HTML block should not contain any of the stuff that comes before the <body> tag, or anything that comes after the </body> tag. And it should not contain the <body> or </body> tags either. The HTML block appears in a page that already contains those elements, and those elements should only appear once on a page.

Second -- You will need to add some stuff to your index.css file or portal.css file. Either one will do. Remember that any simpleportal update will completely replace your portal.css, so save this stuff someplace convenient where you can add it back into your css file any time you need to.
-- instead of the body rule, add this rule
.accordionblock { margin 0;}
-- copy the rest of the rules from between the <style> tags into the end of your css file.

Third -- apply the custom style accordionblock to your block.

I have only looked very quickly over the code you supplied, but unless I have missed something, I think this should work.

Have fun!

FireDitto · « **Reply #11 on:** January 20, 2014, 12:14:07 AM »

Hrm; it isn't working at all now

I have moved the CSS to the index.css file and at the bottom of it.

I have this in my block:

Code: [Select]

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script>
$(document).ready(function(){
 
    activePanel = $("#accordion div.panel:first");
    $(activePanel).addClass('active');
 
    $("#accordion").delegate('.panel', 'click', function(e){
         if( ! $(this).is('.active') ){
			$(activePanel).animate({width: "44px"}, 300);
			$(this).animate({width: "848px"}, 300);
			$('#accordion .panel').removeClass('active');
			$(this).addClass('active');
			activePanel = this;
		 };
    });
});
</script>


<div id="container">
<div id="accordion">
    <div class="panel">
      <div class="pink"></div>
      <div class="panelContent p1"> <strong>Section 1 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </div>
    </div>
    <div class="panel">
      <div class="pink dark1"></div>
      <div class="panelContent p2"> <strong>Section 2 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </div>
    </div>
    <div class="panel">
      <div class="pink dark2"></div>
      <div class="panelContent p3"> <strong>Section 3 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </div>
    </div>
    <div class="panel">
      <div class="pink dark3"></div>
      <div class="panelContent p4"> <strong>Section 4 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </div>
    </div>
</div>
</div>

I have 'accordionblock' in the "Custom Body Class:" and have also tried it in the Style one. Neither is working for me.

AngelinaBelle · « **Reply #12 on:** January 20, 2014, 07:02:14 PM »

Can you provide a link to your site? That would allow me to see what is in the CSS file.

FireDitto · « **Reply #13 on:** January 20, 2014, 09:09:59 PM »

Its the one linked in my profile

AngelinaBelle · « **Reply #14 on:** January 20, 2014, 10:10:58 PM »

Great. I can see that you have added that CSS to the index.css file.
Can you point me at a page with the accordion block on it, so I can see how the css is being applied?

FireDitto · « **Reply #15 on:** January 21, 2014, 10:34:20 AM »

o_o its working now.

I guess the code just need to all catch up with itself? IDK. I ran all the maintenance crap in Admin earlier today because the site was due for a run-through, so I guess that kicked it into gear?

Thanks for all your help though! Greatly appreciate it

EDIT:
I have a question;

Would it be possible to fill the different accordion bars with other simple portal blocks? Is there a way I would be able to do that?

AngelinaBelle · « **Reply #16 on:** January 24, 2014, 12:39:43 PM »

I forgot to mention -- when you make changes to CSS files, it is good to refresh your temporary internet files. In IE, that is done with the F5 key (hard refresh). Otherwise, your browser will save time by not reloading the CSS files it has recently downloaded. Sorry.

IF you are a little bit familiar with php, then you can do an awful lot of things. I am not sure what you mean by "fill the different accordion bars with other simple portal blocks", but I can say that you can get a lot of information on "blocks within blocks" at http://simpleportal.net/index.php?topic=5332.0

There is a lot of discussion on blocks in blocks in the customization boards here at simpleportal.net, also.

[SiNaN] · « **Reply #17 on:** January 24, 2014, 04:24:33 PM »

If you could show me the final exact code you are using for that accordion thing, how you've added it (like directly into index.template.php file or Custom HTML block or Custom PHP block or something else) and which exact blocks you want to put inside, I'll see if I be of any help.

FireDitto · « **Reply #18 on:** January 25, 2014, 05:00:29 AM »

I have blocks-in-blocks for other areas.

Okay, Sinan, I have done it as such:
- CSS code in the theme layouts which is being called by the Portal block
- Accordion is in a Custom HTML block and I'll include the code for it at the bottom of this post.
- The blocks I'd like to put in it are... all custom PHP blocks themselves.

The Accordion code is as follows:

Code: [Select]

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script>
$(document).ready(function(){
 
    activePanel = $("#accordion div.panel:first");
    $(activePanel).addClass('active');
 
    $("#accordion").delegate('.panel', 'click', function(e){
         if( ! $(this).is('.active') ){
			$(activePanel).animate({width: "44px"}, 300);
			$(this).animate({width: "848px"}, 300);
			$('#accordion .panel').removeClass('active');
			$(this).addClass('active');
			activePanel = this;
		 };
    });
});
</script>


<div id="container">
<div id="accordion">
    <div class="panel">
      <div class="pink"></div>
      <div class="panelContent p1"> <strong>Header</strong><br/>
        <p>Info and stuff</p>
<p>&nbsp;</p>
<p>We hope you enjoy your stay,<br />
      </div>
    </div>
    <div class="panel">
      <div class="pink dark1"></div>
      <div class="panelContent p2"> <strong>Header #2</strong><br/>
        <p>More Info and stuff</p>

      </div>
    </div>
    <div class="panel">
      <div class="pink dark2"></div>
      <div class="panelContent p3"> <strong>Header #3</strong><br/>
        <p>Whee!</p>
      </div>
    </div>
    <div class="panel">
      <div class="pink dark3"></div>
      <div class="panelContent p4"> <strong>Section 4 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </div>
    </div>
</div>
</div>

EDIT:
They're all custom PHP blocks.

[SiNaN] · « **Reply #19 on:** January 26, 2014, 03:52:05 PM »

First, you need to have the accordion code in a Custom PHP block. Then you can either embed blocks there or use the block functions defined in PortalBlocks.php file directly in the block. Here's an example:

Code: [Select]

<?php

echo '
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script>
$(document).ready(function(){
 
    activePanel = $("#accordion div.panel:first");
    $(activePanel).addClass(\'active\');
 
    $("#accordion").delegate(\'.panel\', \'click\', function(e){
         if( ! $(this).is(\'.active\') ){
			$(activePanel).animate({width: "44px"}, 300);
			$(this).animate({width: "848px"}, 300);
			$(\'#accordion .panel\').removeClass(\'active\');
			$(this).addClass(\'active\');
			activePanel = this;
		 };
    });
});
</script>


<div id="container">
<div id="accordion">
    <div class="panel">
      <div class="pink"></div>
      <div class="panelContent p1"> <strong>Header</strong><br/>
', sp_recent(array(), 1), '
      </div>
    </div>
    <div class="panel">
      <div class="pink dark1"></div>
      <div class="panelContent p2"> <strong>Header #2</strong><br/>
', sp_topPoster(array(), 0), '
      </div>
    </div>
    <div class="panel">
      <div class="pink dark2"></div>
      <div class="panelContent p3"> <strong>Header #3</strong><br/>
        <p>Whee!</p>
      </div>
    </div>
    <div class="panel">
      <div class="pink dark3"></div>
      <div class="panelContent p4"> <strong>Section 4 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </div>
    </div>
</div>
</div>';

Simple Portal Archived Forum

User Info

Who's Online

Shoutbox

Team Blog

Recent Posts

Author Topic: Call CSS from the Theme to a block? (Read 11319 times)