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.


Modest CSS Change ...

Login / Search

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

Fan in action

On http://aljones.us/cincinvc/index.php?page=books&redirected=1 I'm trying to put up a bibliography with book covers.

Now having just the titles would be acceptable, but *if* I include the covers, I'd like the text (an h3, btw) to show at the top, to the right of the cover.  Can anyone educate me ... and yeh, sometimes it seems like it's hopeless!
Back to the top
 
Posted
Rating:
#104906
Avatar

Community saint

Well, I don't know if I can educate you on this one because I'm not a CSS guru. And for this particular problem I'm at a bit of a loss to explain because, to me, the solution seems a bit counter-intuitive. You can add a vertical-align to the attachment image to get the text next to the image to move up. To do that, find this snippet of code in your global.css:

Code


.attachment_img {
        max-width: 100%;
}


You will need to add a vertical-align: top; line in there like this:

Code


.attachment_img {
        max-width: 100%;
        vertical-align: top;
}


After making the edit, you may need to clear your ocPortal caches as well as your browser cache for the change to show up in your browser.

Be aware, as I mentioned, I'm not a CSS guru... This may have unintended results in other areas of the web site. If it does, you might be able to add a CSS style to that text manually to just that portion of the page by editing the page and disabling the WYSIWYG editing mode so you can see and enter in raw HTML and CSS code. But you may also need to find and uncheck the Convert XHTML to Comcode option in your admin zone to prevent ocPortal from trying to convert your HTML back into Comcode tags. That option is located at Admin Zone->Setup->Configuration->Site Options and the option is way down near the bottom of the page.
Back to the top
 
Posted
Rating:
#104914
Avatar

Fan in action

Worked like a charm, Jason, thanks.

I use that on my own website … but get lost in the global.css file.

Do you, by any chance, know the name of the "small print" items at the very bottom of the "normal"page (site map, rules, privacy, etc)?  My background is dark enough that they're almost impossible to read.

I've found a couple that I thought would qualify but they don't make the change to color for me.
Back to the top
 
Posted
Rating:
#104915
Avatar

Community saint

This seems like a good time to introduce you to the rendering tools. When you are logged in as admin, they are located in a drop-down list in the bottom left of the page you are on.

One of those goodies is the contextual CSS editor: global which allows you see and edit the CSS elements of anything you put your mouse over.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#104918
Avatar

Fan in action

I read but I did not understand!  It wasn't till I saw the flash as I moved the cursor that I saw what was happening.  Thanks for re-directing my attention to it.  I'd been there before, but didn't see how it worked!
Well, I'm back to looking at it; changed the one I thought it was and changed too much acroos the board.  Now that I see how it works, I *may* not be asking so many stupid questions.
Thanks //al
Back to the top
 
Posted
Rating:
#104928
Avatar

Fan in action

temp1024, okay, I surrender … I spent a couple of hours going through the css and trying to find the right spot.
When I move the cursor over the bottom right minilinks I see a plethora of items that affect them but I can't find the right one (and I've tried several) … suggestions please.
Back to the top
 
Posted
Rating:
#104930
Avatar

Community saint

Al Jones said

Do you, by any chance, know the name of the "small print" items at the very bottom of the "normal"page (site map, rules, privacy, etc)?

footer (for color)

e.g.

footer {
background-color: #6b81a1;
margin-top: 2em;
background: url('../../../../themes/aip9/images_custom/footer_b3.png') repeat-x scroll;
color: #ffffff;
padding: 0.6em;
}

 :thumbs:


Edit … BUMMER!!

Your display has something else, so here's an image to get you to the one you need - HOWEVER - please note that there are several categories that are affected here and a white (or light) display on a light background (e.g. for a hyperlink in  a page) will also become invisible …!!



You may well need to define a 'specific' class for that line of 'horizontal links' in the footer.

 :o


Last edit: by Fletch

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

Fan in action

I think, it's area_2_link changed it to white, since I'm on a dark background, and they're right now.
I thought I had changed that before with other unexpected effects, now to go looking and see - again.
Thanks fletch
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: