Recent Topics

1 Apr 02, 2007 01:59    

My b2evolution Version: Not Entered

I've been trying to change the background colour of the template I installed with no success...

here's the url of the blog: http://www.nando.myacen.com/blog/

I want a darker background. Here's the piece of code I believe it needs some editing:

/* styles for andreas_01 skin */
body {
margin: 0 auto;
padding: 0;
font: 70% Verdana,Tahoma,Arial,sans-serif;
background: #000000 url(bg1.gif) top center repeat-y;
}

I've put #0000000 but it still looks like #FFFFFF. The bg.gif image was white and I changed it to black with photoshop. The "frame" worked, but the background itself didn't change at all. So, what am I doing wrong?

Please help asap

Thanks!

2 Apr 02, 2007 02:10

Here's the full css code in case it helps....

/* Import basic styles */
@import url(../../rsc/css/basic.css);
/* Import standard image styles */
@import url(../../rsc/css/img.css);
/* Import standard blog elements styles */
@import url(../../rsc/css/blog_elements.css);
/* Import default form styles */
@import url(../../rsc/css/forms.css);
/* Import default comment styles */
@import url(../../rsc/css/comments.css);

/* styles for andreas_01 skin */
body {
margin: 0 auto;
padding: 0;
font: 70% Verdana,Tahoma,Arial,sans-serif;
background: #000000 url(bg1.gif) top center repeat-y;
}

#wrap {
background: #303030;
color: #999999;
margin: 0 auto;
width: 760px;
}

#header {
clear: both;
margin: 20px 0 0 0;
padding: 0;
height: 45px;
}

#header h1 {
width: 250px;
margin: 0 0 10px 0;
float: left;
}

#header p {
width: 500px;
float: right;
text-align: center;
color: #a0a0a0;
margin: 0 0 10px 0;
font-size: 0.8em;
line-height: 1.2em;
}

#frontphoto {
margin: 0 0 10px 0;
border: 0;
}

#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#avmenu .bSideItem ul {	
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}	

#avmenu .bSideItem li {
margin-bottom: 4px;
}

#avmenu .bSideItem li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #A7444A;
display: block;
padding: 6px 0 0 10px;
background: #303030;
border-left: 4px solid #A7444A;
}	
	
#avmenu .bSideItem li a:hover, #avmenu .bSideItem li a.BlogButtonCurr {
background: #A7444A;
color: #303030;
border-left: 4px solid #303030;
}
.SearchField {
  border: 1px solid #888;
}

.announce {
margin: 10px 0 10px 0;
padding: 10px;
width: 130px;
color: #999999;
background-color: #303030;
line-height: 1.3em;
}

#extras {
float: right;
width: 120px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
line-height: 1.5em;
}

#extras p {
margin: 0 0 1.5em 0;
}

#extras ul, .announce ul {
  margin: 0;
  padding: 0;
}

#extras li, .announce li {
  margin: 0;
  padding-left: 5px;
  list-style-type: none;
}

.bSideItem {
  margin-bottom: 10px;
}
.bSideItem h3 {
  margin-top: 5px;
}

.bSideItem h4 {
  margin: 0;
}

#content {
margin: 0 130px 20px 160px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0 10px 0 10px;
line-height: 1.6em;
text-align: left;
}

#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}

#content img {
padding: 1px;
display:inline;
background: #303030;

}
#content .bSmallPrint img, #content .bComment img {
  background: none;
  border: none;
}

h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}

a {
text-decoration: none;
color: #A7444A;
}

a:hover {
text-decoration: underline;
color: #A7444A;
}

a img {
border: 0;
}

#footer {
clear: both;
margin: 0 auto;
padding: 10px 0 20px 0;
border-top: 4px solid #000000;
width: 760px;
text-align: center;
color: #808080;
font-size: 0.9em;
}

#footer a {
color: #808080;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

.left {
margin: 10px 10px 5px 0;
float: left;
}

.right {
margin: 10px 0 5px 10px;
float: right;
}

.textright {
text-align: right;
}

.center {
text-align: center;
}

.small {
font-size: 0.8em;
}

.bold {
font-weight: bold;
}

.hide {
display: none;
}

.bSmallPrint, div.bCommentSmallPrint {
  background: #404040;
  border-left: 4px solid #999999;
  margin-bottom: 15px;
  padding: 4px;
  font-size: 80%;
}
p.bMore a {
  font-size: 90%;
  font-weight: normal;
}
div.bCommentSmallPrint {
  clear: none;
}

fieldset div.input input[type=text], fieldset div.input textarea {
  border: 1px solid #888;
  width: 170px;
}
fieldset div.input textarea {
  width: 300px;
}
fieldset {
  border: none;
}
div.bComment, form.bComment {
  border: none;
}
#comment_preview {
	background-color: #FFF;
  border: 3px solid #286EA0;
}

3 Apr 02, 2007 02:39

Your description is a bit vague. I guess you want the sidepanels darker (the appear white / grey now.)

Recheck the bg1.gif picture in photoshop. It's a single pix line. The centerpart is black, resulting in the black border around your dark grey content panels.
On both sides there is a light grey part. These are responsible for the white looking panels I mentioned. You should edit both and make them a bit / much darker. That should do the trick.

If you click [url=http://www.nando.myacen.com/blog/skins/andreas_01/bg1.gif]this link[/url] you'll see the line in your browser and notice the light grey hair to the left and to the right of the black line. You probably missed it in PS.

Good luck.

4 Apr 02, 2007 02:54

Ok, thanks! It's working....

Now, one more question: How do I change the colour of the "search box". I would like it a bit darker too, instead of light grey/white....

5 Apr 02, 2007 03:20

General knowledge:
The css for the forms is located at ../blogs/rsc/css/forms.css. This css is overridden by the css of your skin (e.g. ../blogs/skins/your_skin/your_skin.css). Mind this: the general forms.css is (also) used for the user comments input textarea.

In your case, you only want to check the source of your page and you find:

<div class="bSideItem" id="search">
<h3 class="sideItemTitle">Search</h3>

<form action="http://www.nando.myacen.com/blog/index.php" method="get" class="search"><p><input type="text" name="s" size="15" value="" class="SearchField" /></p>
</form>
</div>


which tells us we must find the SearchField class. It's located in your skin's stylesheet http://www.nando.myacen.com/blog/skins/andreas_01/stylesheet.css:

.SearchField {
  border: 1px solid #888;
}


Here you can add a backgroundcolour with this line:

background-color: #666699;

Good luck

6 Apr 02, 2007 03:33

Thanks!! It's working :)

Now I still need to work on that gif image to look like what I want... ;)

7 Apr 02, 2007 03:35

As it appears it's in more than three parts. But you're on the right track now.

8 Apr 02, 2007 03:36

Do you know by any chance why the background of the youtube videos on the blog is white? Do you know how to change it, so it has the same colour as the blog background? Cheers!

9 Apr 02, 2007 03:47

I guess your doing the YouTube with the plugin. I have never worked with that one, but can you set the height of the video in the plugin? If so set it to 330 in stead of 350. The white line looks to be spare because the content is not precisely 450 x 350 px.

10 Apr 02, 2007 17:22

I cant seem to do it in the plugin settings. I believe I have to do it manually, but Im ot sure which file to edit, though. :(

11 Apr 02, 2007 17:43

Changing the size is the real solution to your problem, but till you figured that one out you could try adding:

.youtube {
background-color: #666699;
}


to the css of your skin.

I guess it works, but I can't try it out on my blog, so theres no guarantee this time.

Good luck

12 Apr 03, 2007 15:34

No, it didn't work :( Thanks anyway.

Btw, do you know how to change the word 'feedback' on the comment link? I would like to simply put 'Comments' instead of 'feedbacks'

13 Apr 03, 2007 16:31

plugins/_youtube.plugin.php ( approx line 241 )

	function RenderItemAsHtml( & $params )
	{

		$replace = array(
			'<div class="'.$this->Settings->get('class_container').'"><object type="application/x-shockwave-flash" style="width:425px; height:350px" data="http://www.youtube.com/v/$1"><param name="movie" value="http://www.youtube.com/v/$1" /></object></div>',
			'<div class="'.$this->Settings->get('class_container').'"><embed width="410" height="332" src="http://www.ifilm.com/efp" quality="high" bgcolor="000000" name="efp" align="center" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="flvBaseClip=$1" /></div>',
			'<div class="'.$this->Settings->get('class_container').'"><embed style="width:400px; height:326px;" align="middle" type="application/x-shockwave-flash" src="$1" allowScriptAccess="sameDomain" quality="best" bgcolor="#ffffff" scale="noScale" wmode="window" salign="TL"  FlashVars="playerMode=embedded"> </embed></div>',
			'<div class="'.$this->Settings->get('class_container').'"><embed style="width:400px; height:326px;" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=$1&hl=en"> </embed></div>',
			'<div class="'.$this->Settings->get('class_container').'"><embed src="http://www.current.tv/studio/vm2/vm2.swf?type=vcc&id=$1" quality="high" flashvars="videoType=vcc&videoID=$1" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" height="360" width="335"></embed></div>',
			'<div class="'.$this->Settings->get('class_container').'"><object width="400" height="240"><param name="movie" value="http://www.dailymotion.com/swf/$1"></param><embed src="http://www.dailymotion.com/swf/$1" type="application/x-shockwave-flash" width="400" height="240"></embed></object></div>',
			'<div class="'.$this->Settings->get('class_container').'"><object width="400" height="335"><param name="movie" value="http://jumpcut.com/media/flash/jump.swf?id=$1"></param><param name="flashvars" value="asset_type=movie&asset_id=$1&eb=1"></param><embed src="http://jumpcut.com/media/flash/jump.swf?id=$1" width="400" height="335" flashvars="asset_type=movie&asset_id=$1&eb=1" type="application/x-shockwave-flash"></embed></object></div>',
			'<div class="'.$this->Settings->get('class_container').'"><embed type="application/x-shockwave-flash" src="http://flash.revver.com/player/1.0/player.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" scale="noScale" salign="TL" bgcolor="#ffffff" flashvars="width=480&height=392&mediaId=$1&affiliateId=0&javascriptContext=true&skinURL=http://flash.revver.com/player/1.0/skins/Default_Raster.swf&skinImgURL=http://flash.revver.com/player/1.0/skins/night_skin.png&actionBarSkinURL=http://flash.revver.com/player/1.0/skins/DefaultNavBarSkin.swf&resizeVideo=True" wmode="transparent" height="392" width="480"></embed></div>',
			'<div class="'.$this->Settings->get('class_container').'"><embed src="http://www.vsocial.com/v/$1" height="286" width="330"></embed></div>',
			'<div class="'.$this->Settings->get('class_container').'"><embed src="http://blip.tv/scripts/flash/blipplayer.swf?autoStart=false&file=http://blip.tv/file/get/$1" quality="high" width="320" height="256" name="movie" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></div>',
			'<div class="'.$this->Settings->get('class_container').'"><embed src="http://www.metacafe.com/fplayer/$1" width="400" height="300" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed></div>',
			'<div class="'.$this->Settings->get('class_container').'"><object width="425" height="350"><param name="movie" value="http://embed.break.com/$1"></param><embed src="http://embed.break.com/$1" type="application/x-shockwave-flash" width="425" height="350"></embed></object></div>',
		);

		$content = & $params['data'];
		$content = preg_replace( $this->search, $replace, $content);
		return true;
	}


Lots of sizes and colours in there, just change them to suit ;)

¥

14 Apr 03, 2007 18:33

It didn't work either, still looks the same size and the same background :(

15 Apr 04, 2007 02:33

It should work. Change the height setting in this line from the code ¥åßßå mentioned:

'<div class="'.$this->Settings->get('class_container').'"><object
 type="application/x-shockwave-flash" style="width:425px; height:350px" 
data="http://www.youtube.com/v/$1"><param name="movie"
 value="http://www.youtube.com/v/$1" /></object></div>',

16 Apr 04, 2007 17:11

Already did that. It didn't change at all. :(

17 Apr 04, 2007 17:17

Btw, do you know how to change the word 'feedback' on the comment link? I would like to simply put 'Comments' or 'Post a comment' instead of 'feedbacks'

where and what exactly should I edit?


Form is loading...