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.


CATALOGUE_ENTRY_FOR,download CSS

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#108486 (In Topic #21142)
TQ
Avatar

Honoured member

Hi All,

I have moved my custom download entries to the right hand column in DOWNLOAD_SCREEN.tpl and want to make some aesthetic changes. My problem is that I can't find where the specific CSS classes are applied as they don't appear in the above template.

I would like to use the same configuration as the download_meta_data ie "download_stats results_table wide_table" (which I assume will do what I want) rather than "wide_table results_table spaced_table" I did try to modify spaced_table but that opened a whole new bag of worms.

My goal is to reduce the font size to 0.75em and set the column widths to 45%/55% respectively, the fact that will change the font/cell background colour for column 1 is something I can live with.

I would appreciate any and all help given but ask that you keep in mind that I am a relative novice at this.

Thanks

TQ
Back to the top
 
Posted
Rating:
#108487
TQ
Avatar

Honoured member

OK, I've got my column widths sorted by adding

Code

.catalogue_fieldmap_field_name_column {
    width: 45%;
    font-size: 0.75em;
}
.catalogue_fieldmap_field_value_column {
    width: 55%;
    font-size: 0.75em;
}
to the downloads.css but the font size change is being overwritten/ignored/reset. Could someone point me in the direction of what is over-riding it and, more importantly, how to overcome it?

TQ
example: here
Back to the top
 
Posted
Rating:
#108491
Avatar

Community saint

I would probably try surrounding that particular block of tempcode in the template with an HTML <div> like this:

<div style="font-size: .75em;">
  tempcode that displays the table
</div>

If that works, the more proper way would be to create a css style in the downloads.css file and use it that way. Something like this in downloads.css:

.downloads_custom_details {
    font-size: .75em;
}

and replacing the style="font-size: .75em;" with class="downloads_custom_details" in the <div> code above in the template should work.
Back to the top
 
Posted
Rating:
#108537
TQ
Avatar

Honoured member

Jason Verhagen said

I would probably try surrounding that particular block of tempcode in the template with an HTML <div> like this:

<div style="font-size: .75em;">
  tempcode that displays the table
</div>

If that works, the more proper way would be to create a css style in the downloads.css file and use it that way. Something like this in downloads.css:

.downloads_custom_details {
    font-size: .75em;
}

and replacing the style="font-size: .75em;" with class="downloads_custom_details" in the <div> code above in the template should work.
​Hi Jason,

Thanks for taking the time to reply. I apologise for taking so long to respond but for some strange reason Gmail decided that your message was spam so I didn't discover it until today.

Adding the style info to the DIV works fine but I have been foxed by the CSS version.

I tried:

Code

.downloads_custom_details {
 font-size: .75em;
}
but that didn't work.

As you'll see from my post I expected:

Code

.catalogue_fieldmap_field_name_column {
    width: 45%;
    font-size: 0.75em;
}
.catalogue_fieldmap_field_value_column {
    width: 55%;
    font-size: 0.75em;
}
E
to work as it successfully modifies the column widths but it doesn't adjust the font size.

The reason I suspect that something is overriding it is that, on just one occasion (when the server was being hammered), the font changed to the required size then almost immediately switch back to the HTML page default.... How strange is that!

TQ
Back to the top
 
Posted
Rating:
#108538
Avatar

Community saint

That is strange. If you use the CloudFlare CDN service (or something similar), be sure to purge the CloudFlare cache. If you modify any CSS or template files outside of the ocPortal editors, be sure to use the website cleanup tools from the Adminzone to clear the ocPortal caches. Other than that, I can't think of anything that would cause that, but I'm also not that great with CSS myself. I would probably have to get both the good and bad versions of a download page in separate browser tabs or browser windows to examine the HTML/CSS and compare the good version contents with the bad version contents to see what element is overriding the font size.

The only other thing I can think of to try is to add !important to your font size lines like this:

font-size: 0.75em !important;

!important will tell the browser to give your font-size statement a higher consideration.
Back to the top
 
Posted
Rating:
#108540
TQ
Avatar

Honoured member

Hi Jason,

I don't use CloudFlare, it's on my own Windows server.

I am (now) doing the edits in the OCP editor to avoid such an issue as it's quicker than keep flushing the caches.

I will try the '!important' statement to see how it goes.

Other than that, I'll settle for adding the style to the DIV for now as I have loads of other things I'd like to do to the site. I live in hope that my other changes will increase my depth of understanding how OCP is constructed and expose the errors of my ways.

Thanks for your help.

TQ
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: