Help! Adding inline style to a class in a CMS

HTML & CSS
1

Hi all,

I’m working on something using a client’s CMS. This has built in classes which are used to display text on a decorative background - so it looks like an email, or a handwritten note.

My problem is that I need to make these wider if possible, as the default width isn’t really wide enought to contain the content they want to put in them. I can’t access the CSS that defines the attributes of these classes so I need to do it using inline style but I can’t get it to work!


<div class="email1_top">
<div class="email1_bottom">
<div class="email1">
Content goes here!
</div>
</div>
</div>

I thought that adding style to each div would work i.e.


<div class="email1_top" style="width:###px";>

but this obviously just widens the div and not the image displayed by the class selector.

I’ve also tried adding:


<style type="text/css">
.email1_top { width:###px; }
</style>

in the html, but this doesn’t work - I guess because the CMS editor only allows me to edit a large container div on the page and not the <head>

Given all this is it possible to add an inline width attribute that will alter this class?!! Sorry I can’t link anything - I’m pretty sure it could get me in trouble! They’re an international company and I’m working on some copyright material that’s not in the public domain as yet. And yes, it’s a fair question as to why they hired me!

Thanks for any help! :slight_smile:

2

when you say this, I am guessing you are referring to an image nested within on e of the div’s with the class applied? If so, it is likely the css for the class is styling the width of the image tag with in it. (e.g. in the stylesheet something like .email1_top img{width:100px} will always set the width of an image within an .email1_top class element to 100pixels)

If you want to control the width of the image as well you will need to apply an inline width style to the image tag.


<div class="email1_top">
<div class="email1_bottom">
<div class="email1">
<img style="width:100px" />
</div>
</div>
</div>

If you don’t have direct access to the stylesheet of the website, you could always access it through view source on the webpage and get a clearer picture of what the css is doing to the page.

3

The presence of top and bottom divs wrapping the content suggests the design may be using three background images. If the images have been made to fit the current width exactly and are not designed to repeat on the x axis then there is no way to stretch them wider with CSS.

It would be easier to make suggestions if full HTML (stripped of content if necessary but including DOCTYPE and head) and CSS code were provided.

Do you use the Firebug extension for Firefox? This is a great way to trace and actively experiment with styles in the page.

4

Hi both,
thanks for your suggestions. Having tried a bit more fiddling - and trying matt’s suggestion - I’m no nearer victory :frowning:

I can format everything to fit inside the predefined width of the div - it just looks a bit narrow and naff - but, it’s going to be the best I can do and will suffice.

Victorinox - I haven’t used Firebug yet - meaning to get round to it! - but I’m not sure it’ll do the trick here for the same reason I can’t provide full HTML - I have to enter content and code in the bespoke CMS operated by the client in a split WYSIWYG/code dialogue box and whatever is placed in here is evidently added to the code in the final page.

I think it’s just a bridge too far for now, but thanks again for your suggestions :slight_smile: