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.


css problem

Login / Search

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

Community saint

I am trying to add an image into the css the was not an image in the first place.
This is what I put in the css.


Code

.standardbox_title_panel {
   /* Structure */
   white-space: nowrap;
   border-bottom: 1px solid #88bbec; /* {$,wizard, 61% seed + 39% W/B} */
   background-image:url ("../themes/light%20blue/images/panel.gif") ;
background-repeat: repeat-x;
   

   /* Text */
   line-height: 2.2em;
   padding-left: 5px;
   color: #0c1d2d; /* {$,wizard, 20% seed + 80% !W/B} */
   font-weight: bold
}

This is what the code looked like before I started.

Code

.standardbox_title_panel {
   /* Structure */
   white-space: nowrap;
   border-bottom: 1px solid #88bbec; /* {$,wizard, 61% seed + 39% W/B} */
   background-color: #e3f0fc; /* {$,wizard, 11% (seed sat_to 100) + 89% W/B} */

   /* Text */
   line-height: 2.2em;
   padding-left: 5px;
   color: #0c1d2d; /* {$,wizard, 20% seed + 80% !W/B} */
   font-weight: bold
}

I run http://otakuplayground.com and am hopping to make themes and other things for ocportal even though I no longer use it for otakuplayground.com I still love it and feel it could go far with the right help. It needs themes and needs people to advertise for it.
Back to the top
 
Posted
Rating:
#24334
Avatar

A quick quote from the official CSS specification:
Partial URLs are interpreted relative to the source of the style sheet, not relative to the document

This means you'd do:

Code

 .standardbox_title_panel {
   /* Structure */
   white-space: nowrap;
   border-bottom: 1px solid #88bbec; /* {$,wizard, 61% seed + 39% W/B} */
   background-image:url ("../../../light%20blue/images/panel.gif") ;
background-repeat: repeat-x;
   

   /* Text */
   line-height: 2.2em;
   padding-left: 5px;
   color: #0c1d2d; /* {$,wizard, 20% seed + 80% !W/B} */
   font-weight: bold
}

(remember the sheet is loaded from the template cache directory, not the original directory)

You may want to do this instead:

Code

 .standardbox_title_panel {
   /* Structure */
   white-space: nowrap;
   border-bottom: 1px solid #88bbec; /* {$,wizard, 61% seed + 39% W/B} */
   background-image:url ("{$IMG,panel}") ;
background-repeat: repeat-x;
   

   /* Text */
   line-height: 2.2em;
   padding-left: 5px;
   color: #0c1d2d; /* {$,wizard, 20% seed + 80% !W/B} */
   font-weight: bold
}


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

Community saint

It will know its a gif?
Thanks I will Get right on it.

I run http://otakuplayground.com and am hopping to make themes and other things for ocportal even though I no longer use it for otakuplayground.com I still love it and feel it could go far with the right help. It needs themes and needs people to advertise for it.
Back to the top
 
Posted
Rating:
#24348
Avatar

Yes, the Tempcode 'IMG' symbol can autodetect file types, language-versioning, and can find files both in the current theme and default theme.

For instance, if you did {$IMG,test/example} in CSS or a template belonging to a theme named 'foo', then if any of the following files:
  • themes/foo/images/test/foo.png
  • themes/foo/images/test/foo.gif
  • themes/foo/images/EN/test/foo.png
  • themes/foo/images/EN/test/foo.gif
  • themes/default/images/test/foo.png
  • themes/default/images/test/foo.gif
  • themes/default/images/EN/test/foo.png
  • themes/default/images/EN/test/foo.gif
exists, then it would find them, in that order (it can also find jpg's too).


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

Community saint

Thats neat, if IPB knew how to do that it would fix thier problem with image and themes. They really messed it up on version 2.2 when trying to get a new thing to look at the images that go along with it when its installed. In 2.1 what you had to do every time you installed a skin is edit the settings of the skin and tell it where the images where or which images to use.
Many people did not like that so when they tried to fix it in 2.2 they messed it up big time.

I run http://otakuplayground.com and am hopping to make themes and other things for ocportal even though I no longer use it for otakuplayground.com I still love it and feel it could go far with the right help. It needs themes and needs people to advertise for it.
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: