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.


Aligning text of box heading

Login / Search

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

Community saint

I searched the docs and the forums but couldn't seem to find this.

How can I make the heading of a box left-aligned. I tried using align="left" but that didn't work. Below is what I am trying to do:



Thanks for any help.

Bob
Back to the top
 
Posted
Rating:
#74447
Avatar

CSS, text-align property, Firebug will point you to where it's been set.


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:
#74507
Avatar

Community saint

Thanks.

Should have figured it would be in CSS. I don't seem to fare as well as you when putting in long days.

Bob
Back to the top
 
Posted
Rating:
#74532
Avatar

Community saint

I want to make this change on only one box I use. Which would be the better approach?

  1. Create a new box type that has the specific CSS associated with it;
  2. Just surround the box with divs so I can make the change in only the specific instances I need.

I will be using this box quite a bit so I thought making a new box type might make some sense. It seems I could just copy the existing box code and change what's needed.

Thanks for any help.

Bob
Back to the top
 
Posted
Rating:
#74534
Avatar

toss up. Depends how much learning you want to do (2)


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:
#74537
Avatar

Community saint

Hmmmmm…

I'd take the 'original' …
.standardbox_title_classic, .tabletitle_internal, .standardbox_title_med, .standardbox_title_curved, .standardbox_title_curved_iesucks {
   /* Structure */
   background-color: #426aa9; /* */
   background-image: url("{$IMG,standardboxes/title_gradiant}");
   background-repeat: repeat-x;

   /* Text */
   color: #ffffff; /* */
   text-align: center;
   font-weight: bold;
   text-decoration: none;
   font-size: 1em;
}
… and edit it like this, assuming I only want .standardbox_title_curved (plus IE sucks) to be affected by my edit …
.standardbox_title_classic, .tabletitle_internal, .standardbox_title_med {
   /* Structure */
   background-color: #426aa9; /* */
   background-image: url("{$IMG,standardboxes/title_gradiant}");
   background-repeat: repeat-x;

   /* Text */
   color: #ffffff; /* */
   text-align: center;
   font-weight: bold;
   text-decoration: none;
   font-size: 1em;
}


.standardbox_title_curved, .standardbox_title_curved_iesucks {
   /* Structure */
   background-color: #426aa9; /* */
   background-image: url("{$IMG,standardboxes/title_gradiant}");
   background-repeat: repeat-x;

   /* Text */
   color: #ffffff; /* */
   text-align: center left;
   font-weight: bold;
   text-decoration: none;
   font-size: 1em;
}

How does that grab ya?

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#74539
Avatar

Community saint

Fletch-

I like the simplicity of your approach but I have a couple of questions.

How widespread is the use of .standardbox_title_curved?

Would I just change the box code from type="light" to type="curved"?

Thanks for your help.

Bob
Back to the top
 
Posted
Rating:
#74540
Avatar

Community saint

Chris Graham said

toss up. Depends how much learning you want to do (2)
In other words, the first approach probably makes more sense for someone at my skill level.

Bob
Back to the top
 
Posted
Rating:
#74542
Avatar

Community saint

BobS said

  • 1. How widespread is the use of .standardbox_title_curved?
  • 2. Would I just change the box code from type="light" to type="curved"?
1. Ah! How long is that piece of string …? Sorry, but cannot even hazard a guess at the frequency of use of this particular box.

2. I used standardbox_title_curved arbitrarily to display the example. You would pick the one that suits you, of course.



I think Chris has answered something similar for angrymo, who wants to display different colour headers in different boxes. Perhaps the <div> surround is the way to go. Also easy to set up in the CSS.

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#74546
Avatar

Community saint

Thanks, Fletch.

I will probably take the easy way out using divs.

I wish I was not so pressed for time and had more confidence in my coding skills - making a new box would "automate" the entire procedure, especially since the box contents is using Custom Comcode.

Bob
Back to the top
 
Posted
Rating:
#74547
Avatar

Community saint

Could you not simply make a custom comcode tag that does the alignment and or extends a  css class? I mean if you were to extend the css class of a box then you should be able to simply add that css rule further down in your style sheet to have it overide.

ie if a box were defined as follows

Code

<div class="boxlight leftaligned"> content</div>
then first the boxlight (I have not looked at css makeup yet so I used boxlight as example of an original defined class so imagine that as whatever the real classes are) rules would be applied followed by your  newly created "leftaligned" class. Dunnoj ust offering suggestions and ideas as I haven't played enough yet to know if this is viable but I am imagining it would be?
Back to the top
 
Posted
Rating:
#74549
Avatar

Community saint

Duck-

Yeah - that does sound workable. I think I will give that a try.

Bob
Back to the top
 
Posted
Rating:
#74566
Avatar

Community saint

I've figured out that it is the following CSS that is in play:

Code

.standardbox_title_light, .standardbox_main_classic .standardbox_title_med {
background-image: none;
background-color: #BABD91;
margin: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
color: #38392C;
text-align: left;
font-weight: bold;
font-size: 1em

The template has this:

Code

<h3 class="standardbox_title_light">xxxxxxxxxxxxxxx</h3>

Do I use a new class in the template like "standardbox_title_light_left" and then create .standardbox_title_light_left in global CSS. Do I need to copy all the parameters or just the ones which will change (i.e.,  text-align: left)? Also, do I just a margin-left: xpx to move the text off of the extreme left boundary?

Thanks for any help.

Bob
Back to the top
 
Posted
Rating:
#74569
Avatar

Community saint

  • Do I use a new class in the template like "standardbox_title_light_left" and then create .standardbox_title_light_left in global CSS.
Yes
  • Do I need to copy all the parameters or just the ones which will change (i.e.,  text-align: left)?
All
  • do I just a margin-left: xpx to move the text off of the extreme left boundary?
My preference is 'padding-left' for this one

 :thumbs:
     

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#74570
Avatar

Community saint

Thanks, Fletch. I now feel confident enough to give it a shot….or maybe I should have a couple of shots of Jack Daniels first.

Bob

Back to the top
 
Posted
Rating:
#74573
Avatar

Community saint

Okay, I've made the following changes but it still doesn't work after clearing cache.

I've added this to the bottom of global.css in the css_custom folder for my theme:

Code

.standardbox_title_light_left {
   /* Structure */
   background-image: none;
   background-color: #babd91; /* {$,wizard, 60% sb_color + 40% seed} */
   margin: 0;
   padding-left: 2px;

   /* Text */
   color: #38392c; /* {$,wizard, 30% th.bgcolor + 70% !W/B} */
   text-align: left;
   font-weight: bold;
   font-size: 1em;
}

I've changed the code on my Comcode page as follows:

Code

[semihtml]
<div="standardbox_title_light_left">
[box="Christine Ritter reflects on her father's work" type="light"][audio width="400" height="24"]/uploads/commentary/Christine_reflects.mp4[/audio][/box]
</div>
[/semihtml]

I suspect that I need to somehow tinker with the box 'type' or create a new box type.

Any thoughts?

Bob
Back to the top
 
Posted
Rating:
#74575
Avatar

Community saint

I'm not sure about the 'box' coding (I've never used it - I don't think!), but the

Code

<div="standardbox_title_light_left">
is missing the 'class' and should be …

Code

<div class="standardbox_title_light_left">

Any luck with that …?

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#74580
Avatar

Community saint

Well, this is an odd one.

The padding-left is working but the text-align: left does not.

And the padding is applied to the full box:


I think I need to just target the h3 tag but I have no idea how or if you can even assign padding to a title tag. Gotta look that up.

Thanks for your help, Fletch.

Bob


Back to the top
 
Posted
Rating:
#74581
Avatar

Community saint

NP. Will await the Zebedee-moment when you tell us how you fixed it …

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#74593
Avatar

Community saint

Thanks to Fletch for his help in getting this sorted.

Onto the next thing while I await an explanation of why Google Analytics still is not tracking the site traffic.

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

Quick reply   Contract

Your name:
Your message: