Editing Header, conceptual problem

rj · Post by rj » Fri Sep 15, 2006 10:37 pm

Took me three weeks and three servers to get any of them to give me the correct HOST NAME... So I just got past the install last night.
The most important thing for me right now is to personalize the APPEARENCE. And it seems that is the most complicated issue, where I have to begin.

I used your theme COMPETITION I think. It has a coffee cup uptop.
I want to change that image. In the bigger TITLE window I want to put my own .jpg backround and add some sort of link buttons, like CONTACT and ABOUT and a link to my website. Can this be done without writing code I have never seen before this morning?

I guess this is what I need to know most now.
What directory is the theme stuff in for what is on my blog screen.
Templates defaut, Templates rtl, templates competiton?

I would think there would be some fairly easy way of editing the headers up there without having to know code? I been doing FRONTPAGE for a decade and I guess my brain cant get out of HTML mode. So when I look at these code pages, it just overwhelms me.

How about starting over myself doing my own theme. Is there a tutorial or something?

carl_galloway · Post by **carl_galloway** » Fri Sep 15, 2006 11:05 pm

That particular template is in the competition folder.

To change the image in the banner, create an image withthe same dimensions as the coffee cup (202px x 116px) and simply place it in the img folder. Then open style.css and find this

Code: Select all

#serendipity_banner {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    border: 1px solid #FFFAF0;
 /*   margin: auto; */
    width: 90%;
    height: 116px;
    background-color: #708090;
    background-position: 0px 0px;
    background-image: url(templates/competition/img/background.png);
    background-repeat: no-repeat;
}

Then simply change the name of the image 'background.png' to the name of the image you want to use.

As for adding a navbar, any html nvbar can be stuck into the template , you jest need to open index.tpl and add the html, then open style.css and add its styles.

Creating your own template is relatively easy (so says the person whose first template was an unmitigated disaster becasue he didn't understand what he was doing), and I've written a basic guide to the Serendipity template structure that might help, but your best bet is to get your hands dirty and just see what sort of result you come up with. You can't destroy your blog, and if it doesn't work you can always select another template.

rj · Post by rj » Sat Sep 16, 2006 5:01 am

Just your help of the WHERE of things moved me along expotentially!
I am now adjusting to the new code. I imagine this style
business is not documented all that well because its something we do only once.

I have a few more questions if you will.

I want to change the page backgound and been fiddling here and there and cant seem to make it take. I want it as a .jpg
I already got the jpg file in a bunch of places.

As to the wheres: I noticed when I create a new subject I go to a really nice full editor, but when I (or users) COMMENT, its a crummy little box with no options. Is there a place I can make COMMENTS use the full editor?

And how do I get a user to be able to BEGIN a thread?

When one starts out with all this, tHere are just so many WHERES it overwhelms.

carl_galloway · Post by **carl_galloway** » Sat Sep 16, 2006 7:55 pm

Without seeing your site, some of my advice might turn out to be incorrect, but generally speaking the background should be set by adding the image to a background style of the body element in your stylesheet. Try changing

Code: Select all

body {
    font-size: 10pt;
    margin: 1;
    background-color: #16425E;
    font-family: verdana, arial, helvetica, sans-serif;
    margin-bottom: 30px;
}

to this

Code: Select all

body {
    font-size: 10pt;
    margin: 1;
    background: #16425E url( {TEMPLATE_PATH}img/imgname.jpg) repeat;
    font-family: verdana, arial, helvetica, sans-serif;
    margin-bottom: 30px;
}

You will find however that this only covers the background of the page outside the main table.

Comments aren't designed to allow extra formatting because this can be a security breach, however it is possible to add smilies and bbcode to your comment form by installing the plugins for these.

If you want users to be able to post entries to your blog, you'll need to install the user self-registration plugin, then you need to make sure that users have permission to create entries. This is done from the manage users and manage groups section of the admin menu. Just be aware that you may end up being flooded with spammy entries, so you might want to moderate all entries before publishing.

For help with plugins, see the Spartacus repository.

rj · Post by rj » Sun Sep 17, 2006 2:26 am

Boy have you been a help! I never did get the image as a background but I did change the color to close enough.

I have a few easy ones for you and then I should be about done and out of your hair... Well until the spam hits anyway.

I have some concern over the standard editor rights in the graphics area where they can upload to the server. I think that could be abused, but I dont want to shut them off from ping graphics. Is there a way to allow pinging put not uploading?

Whats the difference between PUBLISH and DRAFT? Does DRAFT mean wait for moderation?

I edit in cuteftp, example style.css file, the code goes to the right about two miles... Is there any kind of style command that can be added at the top of these files to get them under control.

And am I right in that when I edit the style.css in one place, it is edited in all the places it resides?

And lastly (you wish) in HTML Nuggets I cant figure out how to hide what I want hidden.
Say its...

<a href:="http://mysite.com">LINK TO MYSITE</a>
Or the same for an image...

How do I get it to just show the LINK TO MYSITE?

carl_galloway · Post by **carl_galloway** » Sun Sep 17, 2006 8:11 am

Unfortunately I can't help you with your user rights ie being able to ping, but not able to upload media, I suspect one of the developers will need to step in and answer that question.

Publish simply means the entry is displayed on your frontpage, or archive pages if it is no longer current, the process of publishing an entry also notifies the ping servers if this plugin has been installed. Draft mode means that the entry is essentially incomplete and not ready to be published, which in your case may very well also mean it waiting for a moderator/administrator to approve it.

I'm afraid I don't use cuteftp, my preference is a simple text editor such is notepad in Windows or gedit in linux. Does the cuteftp website have its own forum where you could ask the question?

Your next question about style.css, each template only contains a single style.css, so yes, you are correct that if you edit one of the tags/classes then by rights you shouldn't need to edit it anywhere else, but this advice xcould also set you astray because of the nature of CSS (cascading style sheets). The idea behind cascading stylesheets is that whichever class is mentioned last, takes precendence. To give you an example, lets say you want to give all bold tags a particular class. Your stylesheet would include a bold element with the relevant styles, but then lets also say you want your sidebar title to also be bold, but a different color. Now you need to create a different class of bold for your sidebar. This can go on and on. I recommend reading up on CSS, especially the introduction sections.

Lastly, your link you quoted is incorrect, the first colon is not required and is the reason for the link not working. Try the following;

Code: Select all

<a href="http://mysite.com">LINK TO MYSITE</a>

Hope that helps, and feel free to keep asking questions, I'm sure other readers are enjoying our banter, and perhaps learning from this as well..

judebert · Post by **judebert** » Mon Sep 18, 2006 1:17 am

I'm not sure how you ping an image, so I can't really answer that question. Could you try asking it a different way?

The movement on style changes probably means that the edit was incorrect. You should check out SlayerOffice MODI, which allows you to look at the attributes and classes assigned to your objects directly from your browser. Very cool script. It's helped me out many times. And if you use FireFox, you can use the EditCSS extension to check out changes to your CSS locally before you make them permanent on the server.

As Carl mentioned, the colon is not used in HTML assignments. (Do you program Ada?) However, you might also be experiencing a problem with your editor: if it's in WYSIWYG mode, you need to switch to "Show HTML" or plain text mode. Otherwise it escapes the tags so they show up exactly as you typed them.

TopDawg · Post by **TopDawg** » Mon Sep 18, 2006 8:41 pm

I also have a question about the header...

I have a .jpg image as my header, and to get rid of the blog title, I simply left that blank in the general configuration.

However, when I go to a specific entry page, the title still shows up over the image. Is there a way to fix that?

Thanks!

judebert · Post by **judebert** » Mon Sep 18, 2006 9:05 pm

You could either manipulate the CSS so the H3 with the blog title IDs are display:hidden, or check in the index.tpl to see where the title is displayed and remove it.

TopDawg · Post by **TopDawg** » Mon Sep 18, 2006 10:47 pm

Perfect.

Just deleted the title in index.tpl and put a link to the home page on the sidebar

Thanks

judebert · Post by **judebert** » Tue Sep 19, 2006 3:21 pm

Hey, that makes two problems I've helped to solve. Woo-hoo!

<notches belt>