News Module & CSS Problem

[timh]

I am currently stuck trying to implement some different styles for the news module; I am new to CMSMS and have used CSS previously but only in table based layouts.

With the CSS I want to use this approach that I found online; it adjusts the position of the background image on hover, the image includes two images / 'buttons' and when hovering over the link it adjusts the image. I can get this working outside CMSMS quite easily but am totally stuck within CMSMS.

I had some challenges getting the different styles to work at all (irresepctive of background image) but am completely missing something... Help! TIA

This is my CSS

Code: Select all

div.itemheader a {
	padding-left: 10px;
	line-height: 24px;
	text-decoration: none;
	font-weight: bold;
	color: #555555;
	background-color: White;
	background-image: url(images/cms/itemheader.jpg); 
	background-position: 0px 0px; 
}

div.itemheader a:hover {
	text-decoration: underline;
	font-weight: bold;
	color: #555555;
	background-image: url(images/cms/itemheader.jpg); 
	background-position: 0px 24px; 
}

And this is the news template

Code: Select all

<div class="items">
	<div class="itemheader">{cms_selflink page='58'}</div>
</div>
{foreach from=$items item=entry}
<div class="item">
	{$entry->titlelink}
</div>
{/foreach}

[Dr.CSS]

Do you have a link?

Most installs have the images in uploads/images, I believe it has diff. permissions than the other folder iirc I know in the older ver. the header image is in that folder but the newer ones have been moved to uploads/images because so many ppl. were using the other folder for all the images, you may be used to having them in a folder called images from previous web designing.

Have you looked at the rendered page source view to see if it has any more calls that you can hook to, and tried just .itemheader instead or div .itemhead?

[timh]

Thanks, unfortunately this is running under XAMP on my local machine.

Sorry, no link... its running on my local machine 

I have been able to get this working (sort of) with another part of the page. The sort of is because the image works correctly (ie it changes on hover) but it is only displayed behind the text. When I tried this outside of CMSMS it displays behind the whole

Here's the source for the bit that is 'sort of working' from the rendered page:

Code: Select all

<div class="printsend">
  <div class="printpage">
    <a class="noprint" href="http://localhost/cmsms/index.php?page=54&print=true&goback=0" target="_blank" title="Print">Print</a>
  </div>
  <div class="sendpage">
    <a href="mailto:contact@fiverings.co.nz?subject=Five Rings Website Enquiry" title="Click here to send to contact us ...">Email</a>
  </div>
</div>

I figure this may be because of the "class="noprint"" however I have no styles for "noprint".

I'm off to have another attempt on the other section.

Thanks for the help.

[Dr.CSS]

If it is a matter of getting rid of the text...

div.itemheader a {
padding-left: 10px;
line-height: 24px;
text-decoration: none;
font-weight: bold;
        text-indent: -999em
color: #555555;
background-color: White;  this should be #FFFFFF
background-image: url(images/cms/itemheader.jpg);
background-position: 0px 0px;
}

A good place to get the hex number for colors...

http://www.colorschemer.com/online.html