HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


I'm being really thick.

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#54387 (In Topic #11852)
Avatar

Well-settled

Yup, even thicker than normal.

I did something really 'clever' late last night, that made a load of changes to the look of the site, that I am very pleased with. And one change that I'm not.

Basically, I have redefined h2 and h4 in the CSS, which looks great in the forum, the Personal Zone, etc., but has mucked up the 'classic' blocks on my front page.

Which template do I edit so that all the classic blocks use a different header instead of h4? If I open, for example, the template for the IOTD block, it just says 'classic' - it doesn't actually say h4 anywhere in it, so I'm guessing it must get the 'classic' look from somewhere else. I tried the template tree, but that didn't help me. Because I'm thick.

(And could I then 'make up' a new header like h7, and then just put this in global.css? Or is there a limit?)

Also, again because I'm thick, I want to edit the Personal Zone, but can't. The main header is only across the right of the screen, with a column of options down the left. How do I move this column so it comes under the main header (which will then span the whole screen like all the other pages)? I tried the template tree, but it only works for the right hand box. And I can't work out what to do. Because I'm thick.

Thanks in advance!
Back to the top
 
Posted
Rating:
#54396
Avatar

2nd thing may be best demonstrated with an annotated screenshot.

1st thing, I'd turn it on it's hard. Leave the tags the same, but try and undo your CSS for boxes.
For example, classic standard boxes have this class around them: standardbox_wrap_classic.

So you can do:
.standardbox_wrap_classic h4 {
   whatever you want for standard boxes that you don't want for headers outside standard boxes
}

Basically longer selectors (".standardbox_wrap_classic h4" is longer than just "h4") take precedence in situations where they can apply.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#54402
Avatar

Well-settled

That's a cool tip!  Thanks - I'll find uses for that.  (Does a simpler CSS aid performance?)

Unfortunately, I only want to affect the boxes on my front page - News, IOTD, Coming Soon… and Weather.  Doing that CSS thing also affects things like the forum Statistics, and Your Membership Information.  How do I isolate the 4 boxes on my front page, so I can change them without changing anything else?
Back to the top
 
Posted
Rating:
#54405
Avatar

"Does a simpler CSS aid performance?"

It can make a very small difference, but only really if you start using "*" in your selectors.

You can target the front page quite easily. ocPortal puts the page naming in via an ID, so put "#page_running_start" into your selector.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#54406
Avatar

Well-settled

Chris Graham said

You can target the front page quite easily. ocPortal puts the page naming in via an ID, so put "#page_running_start" into your selector.

Ummm, I understood far too few words that you just said.  What is a 'selector'?  And are we talking into the CSS?

And are you always at work?  (Thanks, though.)
Back to the top
 
Posted
Rating:
#54409
Avatar

A selector is simply something CSS properties are set against.

So:

Code

.foo .bar {
   background: blue;
}

In that example, ".foo .bar" is the selector.

So when I say "put #page_running_start into the selector", I just mean like this:

Code

#page_running_start .foo .bar {
   background: blue;
}
so it'll only match stuff underneath a element with the ID "page_running_start". And in ocPortal that means it'll only run on a page called "start".

And are you always at work?  (Thanks, though.

;).


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#54412
Avatar

Well-settled

That is so clever!  So you can have different CSS for each different page, if needed?  You guys thought of everything!
Back to the top
 
Posted
Rating:
#54416
Avatar

We use it a lot on this site :).


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#54428
Avatar

Well-settled

Can I do this for a Zone, e.g. the personal zone?

(I know I could make a different theme for that zone, but then I'd have to maintian parallel themes for each change, which would be messy.)
Back to the top
 
Posted
Rating:
#54438
Avatar

In GLOBAL.tpl…

<div id="page_running_{$PAGE*}" class="global_middle dequirk"
–>
<div id="page_running_{$PAGE*}" class="zone_running_{$ZONE*} global_middle dequirk"

Then you can do .zone_running_personalzone.

We'll do this change in the default template too, it's useful.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#54661
Avatar

Well-settled

How would I isolate just the Forum Home?  I changed it so it is just called Home in the breadcrumb, but the technique above doesn't work with:

#page_running_home
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: