Recent Topics

1 Jun 29, 2004 23:48    

I am using b2evolutions version 0.9.0.8. I use only the custom skin. I would like to replace the title at the very top of the page with a .gif image that I would use as my logo. How can I do this?

2 Jun 30, 2004 05:11

We are doing something similar at [url=http://blogs.iasc.com/]The TeleInterActive Press[/url] - which is not yet ready for public viewing - but we're all family here. ;) Click on one of the blogs, to really see our new skin. Though we have the logo and banner here as well - from the summary.php called from the index.php. Feel free to view | source. That's the best way to make daya (cheat).

In blogs/skins we created a new folder. This will give you a new skin name. (You could also just modify the files in blogs/skins/custom.) We then copied all the files and ./img folder from custom to blogs/skins/new_skin/

You will need to modify both the _main.php and the new_skin.css or custom.css file.

In the _main.php, if you want your logo in the upper, left-hand corner, search for the body tag, and add the following...

<body>

<div id="heading">
 <!-- The following lines are to add the logo -->

 <a href="http://www.YourDomain.tld"><img align="top" id="Logo_140" alt="Logo for Your Org" height="88px" src="http://www.iasc.com/assets/images/iasc_10_20020526v1_140.jpg" width="140px" border="0" /></a>

Some things to note here.

    Since we didn't want to have the logo in multiple places, we put in the absolute path to where our logo resides on our site. You could point the "src" to new_skin/img/logo.gif or where your logo resides on your web site. We gave this "img" tag an "id" of "Logo_140". You may call it whatever you want, but this name (case sensitive) may be used in the css file. Our name is Logo_140 because this is the 140 pixel wide version of our logo - as evidenced by the width. Make sure that your height and width values in the code, match the actual height and width of your logo image. We just defined the img tag style here with boder, height, and width and in the css file below. You could define it in either place, but should define it in the css file. See the #Logo_140 id selector in our css file example below. We have a new div id of "heading" - this is required for our 3 column with heading and footing style that we are developing. Keeping all the "heading" items, such as the logo and the pageTitle, pageSubTitle and top navigation bar within one container - the div that we call "heading" will make your life easier.[/list:u] Here is the code from our css file, that - among other styles - we've added to custom.css...
    body {
    	width: 97%;
    	}
    
    html, body {
    	margin: 0;
    	padding: 0;
    	background-color: #bed2ee; /* Fuchsia */
    	/* background-image: url(http://www.iasc.com/assets/images/IASCBlue_background7.gif); */
    	font-family: Arial, sans-serif;
    	font-size: 84%;
    	color: #003366;
    	}
    
    
    div {
    	border: none;
    	}
    
    #heading {
    	background-color: #bed2ee;
    	width: 100%;
    	top: 0px;
    	margin-top: 0px;
    	margin-left: 0px;
    	/* border-bottom: 1px solid #333;*/
    	height: 115px;
    	}
    
    #Logo_140 {
    	background: #bed2ee;
                    height: 88px;
    	width: 140px;
    	border: none;
    	/* float: left; commented out 2004.o6.27 JAdP */
    }
    
    #Logo_140 a {
    	border: none;
    	text-decoration: none;
    }
    You will want to choose background colours, fonts, text-decorations, etc, etc, to match your site or those from custom. Those more experienced in css, please chime in, and correct anything here that is misleading. I hope that this helps. Enjoy b2evo.

3 Jun 30, 2004 05:17

BTW, if all you want is one gif at the top, take a look at the css and _main.php in blogs/skins/babyblues.

Thanks.

4 Jun 30, 2004 06:25

Man....HTML was sooo much easier. Thanks for the advice.

5 Jun 30, 2004 09:24

This is html... I guess you mean using tables... Well, there is a reason most professional designers have stopped using tables for their layouts. You'll find it easier at some point.

6 Jun 30, 2004 18:01

Graham, I use Dreamweaver MX 2004 as my editor......where in all the b2evo files is the html? I see tons of .php files and a few .css file which I have already edited. When I post something I can't seem to find where that text lives in the HTML......or.....PHP.....in other words....if I write a long post....where is the actual text of what I wrote? Thank you.

7 Jun 30, 2004 18:53

hullodare,

Data is separated from presentation. In the long run, that's much easier to manage.

"Where is the (x)HTML?"

The posts that you type into the form are stored in a MySQL database. They are pulled up by a program written in PHP, and then spit out according to the "evoSkin" or "template" that formats the output according to your wishes.

So, the XHTML is:
1. In your posts in the database (bits of it are, anyway. You probably don't have a full page in there, just one post. And a lot of my posts use GM code or BB code these days.)
2. In the files in the skins folder and subfolders. (PHP files often contain HTML . In fact, you could give a file a ".php" extension, and not actually have anything but HTML in it. Of course, that'd be pretty boring!)
3. In the files in the admin folder

Separating things even further, each skin is more than just a "style." It is more accurately the "structure" of the output (the php files,) as well as the style (css).

So, you have:
Content/Data Layer: "what you type" => stored in evo_posts.content in the db
Logic/Business Layer: "when to show things" => all the core files (b2evocore, plugins, xmlsrv, etc.)
Structure/XHTML/Presentation Layer 1: (mostly) in the files in the skins folder, created dynamically according to b2
Presentation/CSS/Style/Presentation Layer 2: (mostly) in the .css files in the skins folder - not created dynamically.

(A few of) the plus sides:

1. Advanced Maintenance/features/etc.
I shudder to think of how one would hope to maintain a blog with a measly 500 posts using nothing but pure HTML and notepad. (My suspicion is that that's the reason my friend [url=http://tommyblack.netfirms.com/]TB[/url] updates so rarely.) What if you need to change a link that appears on every page? (I used to get around this with JavaScript includes, but it's sooooo sloppy and JS is soooo annoying to use, imo. SSI works as well, but neither of these are any easier than php.)

2. Less server-side data overhead
Ok, so let's say you DID have 500 pages of HTML to manage your blog. Each one has roughly the same heading, sidebar of links, etc. So, you're storing some things 500 times, instead of just once!

3. Separation of style and content.
If a browser is text-only, or black and white, or whatever, then they can probably still see your XHTML fairly well if you use CSS to style properly semantic markup. Also, CSS files are cached locally, making your page load faster (less bandwidth overhead.)

In addition, consider this:

<style type="text/css">
h1 { 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
    color: #f00;
}
</style>

<h1>This is Aich One!</h1>


vs

<h1><font face="arial" size="200%" color="red">This is Aich One!</font></h1>


That looks, at first, like the second one is less code.
Unless you have 200 of those h1s. And if you do, what if you want to change the color from "red" to "blue"? For the css-user, it's a 2-second task. For the font tag user, it's a stomach turning exercize in redundancy. Occam's Razer applied to programming: Never rewrite reusible code unnecessarily!

4. Your XHTML is readible.
It takes a lot of practice to be able to read through a mess of trs and tds and know what's going on. If each one has various style markups, it gets even trickier. And you don't even want to know what most layout tables look like in text-only browsers.

The only downside:
1. You have to learn a few new languages.

Suck it up. It's good for your brain, and good for your site. And CSS really is exceedingly simple (tho the application can be used in very innovative ways!)

If you still object to using CSS, check out the Basic skin. open up those files in a text editor and play around. It's basically just plain ol' html, with some special tags thrown in.

http://www.google.com/search?&q=web%20standards
http://www.w3schools.com/

8 Jul 01, 2004 06:42

isaac, I was very impressed with your explanation of how php and css works. You have really inspired me with your post and I and very thankful for the time that you took to respond to my initial message. I am familiar with css only through working with Dreamweaver MX 2004. I will pursue the links you provided especially the brilliant w3c schools. Many thanks and much appreciation for the invigorating message. You made me think and you taught me something. What could be better than that?

9 Jul 01, 2004 07:39

Isaac, do you remember how to do a short post? ;)


Form is loading...