Editing and Location of HTML/CSS Source

[port_user]

I recently installed WB and downloaded a new template, and created two pages with the same template. The font of the subheadings on the pages is different for some reason.

First,  I don not understand why, as it's the same template, and second, I cannot find the HTML and CSS source code to edit the pages.

Most  files in WB folder and subfolders are PHP. I cannot find a specific HTML/CSS file for each page (at least for the second page I created). However, when I go to View-Source in the Browser, it's there. How do I edit these pages? Thanks.

[maverik]

http://help.WebsiteBaker.org/pages/en/welcome.php

[port_user]

Please do not re-post links. Reply only if you have something to say. Thank you.

[maverik]

you ask for basics which you can read in the help projekt and find with forum search

[Luisehahne]

Please do not re-post links. Reply only if you have something to say

incredibly

[port_user]

What is "incredible" is the lack of respect you show to someone who posted for the first time in the Help section intended for beginners. If the questions seem to you naive (as they may be), just ignore them. Answer only the questions that you find worthy of your 'expertise,' and please don't respond to this post.

[kweitzel]

Guys, please settle down.

1) @Maverik: You could have posted the deeplink into the template section of the helpsite

2) @port_user: You should have given us the courtesy of checking the help pages. There you would have found the section about templates: http://help.WebsiteBaker.org/pages/en/advanced-docu/designer-guide.php

cheers

Klaus

[maverik]

 

jetzt kann ich nur noch auf deutsch

@kweitzel

sorry aber das ist nicht dein ernst. ich habe bewußt den link aufs help projekt gesetzt weil es hier an grundsätzlichen basics fehlt und man sich überhaupt mal ins thema einlesen sollte. du entschuldigst dich quasi und verbesserst mich. das bei einem neuen user der hier auftritt wie graf schnösel und ein verhalten an den tag legt wo er im normalen leben sofort des raumes verwiesen würde. hallo?

was soll das? wovor hast du angst? der thread gehörte längst geschlossen und der user verwarnt.

ich glaube ich brauch ne längere wb pause...keine worte mehr.

[PurpleEdge]

Yeah, I think newbies should be entitled to as at least 10 questions before the forums starts patronising them <g> (I think some of the posters here are just trying to get their reply count up)

As a fellow newbie I'll try and give you my understanding of how it works, but eventually you'll have to dig into the docs as others have suggested.

Content management systems like WB don't create HTML pages, they use php pages and code to get the html from a database and then display that "dynamically".

What I have done to check out the html and css in a WB page is to open the page in a browser and save as HTML. This will create the html page and save the css file for you - you might have to download some additional images from the site for the saved page to display correctly locally. Then you'll be able to see the html, and css, and edit the css appropriately.

The actual css file that is used by WB is saved in a folder on your website called ...

website URL/templates/the name of the template/

...you might, or might not be able to edit this file directly since WB can make some files and folders "read-only" when a template is uploaded.

[Argos]

@ maverik: please use English in the English forums, thank you.

[Argos]

@ PurpleEdge: while it is true what you tell, you make it too difficult for the poster. The "problem" he faces I think is that he cannot find the template files in his local installation. Of course, that is logical, as he installed a template from the repository, so he only sees a zip file.

@ port_user: all templates are in the /templates directory in both local and server installation. When you install a new template, normally the template only is unzipped on the server, and you won't find it in your local installaton (unless you manually unzip it there). There is no separate HTML/CSS for each page, all pages use the same source code that is in the template. That's one of the differences with non-CMS sites.

What you want to do is to edit the template. There are 3 ways:
1. edit online, using a module like http://www.websitebakers.com/pages/admin/admin-tools/webbase-edit.php. Of course you can work offline first, and then paste the new file content in the online editor. This is rather cumbersome, and not very efficient.
2. work offline, and rezip and reinstall the template after each change. This is also rather cumbersome, and not very efficient.
3. work offline, and upload the new files with FTP. This cannot be done if you installed the template through the admin first, as the file user is different. Best is to uninstall the template, and then upload it with FTP in the templates directory. Then in the admin go to Add-ons > Advanced (small link in upper right corner) > Admin Settings (last option in the big menu) > check the Templates box, and click on Reload. This can be done only once, and after that all changes can be done offline and uploaded with FTP. This is the way I always work. I work offline in Dreamweaver and upload changes with FTP. It's easy, fast and user friendly.

[Luisehahne]

1. edit online

The best way to edit online ist the Addon File Editor you find here

http://www.websitebakers.com/pages/admin/admin-tools/addon-file-editor.php

Dietmar

[port_user]

Thank you PurpleEdge and Argos. Yes, friendliness to beginners is the foundation of open-source community...

I actually figured out most of my naive questions. As I understand, WB templates do not contain HTML files. All HTML code is in PHP files, index.php being the most important one. So, I did some HTML editing using index.php file. In fact, saving HTML source from the browser would not help, as HTML files could be delivered to the front end only using PHP functions. So, any HTML template file (in WB) must be linked to PHP functions - elementary for experts(if I am correct) but may help beginners...

I also made a mistake copying and pasting text from Word to WB editor - this somehow change the appearance of the template itself.

Here is what I still do not understand:

I cannot fully edit template.css file. I can edit only one section related to <div id="wrap"> in the index.php. The rest - background, images, anything at all does not change whatever I do to the template.css. There is another file in this (1024px) template - style.css - but is seems to me completely redundant old copy, as it's not referenced in index.php file. Any comments?


Note: I am not sure what Argos means by "There is no separate HTML/CSS for each page." I can change the style (not the template structure) for each page separately through the page settings (for example I chose 'All CSS' for one page).

Regards

[PurpleEdge]

Argos, thank you for those tips, they are things I never knew about and will save me from having to un-install and re-install templates!

port_user - I have not seen the 1024 template so I don't know which css files it uses? Rename ths style.css to something else - that will soon show you if it is used or not, and don't forget to clear your browser cache Ctrl-F5.

And you are correct, each page can use a separate template, or the default template which I think is what Argos was trying to explain.

[Argos]

As I understand, WB templates do not contain HTML files. All HTML code is in PHP files, index.php being the most important one.

Yes, index.php is in fact the only php file you should touch in almost every WB template. You should not edit other .php files as a beginner. Only index.php and of course the stylesheet(s). The index.php is really not much more than an HTML page with some php tags to respresent content, menu, and some variables. You can edit the file in any editor. If you read the help docs about converting a HTML file to a WB template file, you will better understand what's going on. It's really easy once you understand the principles.

I also made a mistake copying and pasting text from Word to WB editor - this somehow change the appearance of the template itself.

You should never paste Word code into the editor, as you will paste MUCH very bad typical Word code into the content, which will almost certainly wreck your content layout. However, it does NOT affect the template. This crucial. In the editor you put content. The content is represented in the template by a single content tag. So you changed the appearence of the content, but not the template. You should try to understand this fundamental separation of template (=layout and structure) and content (=what you publish in the editor). This is one of the basic concepts of a CMS.

I cannot fully edit template.css file. I can edit only one section related to <div id="wrap"> in the index.php. The rest - background, images, anything at all does not change whatever I do to the template.css. There is another file in this (1024px) template - style.css - but is seems to me completely redundant old copy, as it's not referenced in index.php file.

Sometimes designers use 2 stylesheets: 1 for structure (div, span, etc) and 1 for style (colors, images, etc). But they should both be called in the index.php. Try to download the template again, and start new. Maybe you accidentally deleted the styles.css call in your copy? Otherwise the templates is not correct, and you should add tha call yourself.

Note: I am not sure what Argos means by "There is no separate HTML/CSS for each page." I can change the style (not the template structure) for each page separately through the page settings (for example I chose 'All CSS' for one page).

No, that is not right. You can change the template per page that way indeed. A template normally changes the complete layout of your site, or page. Your current template seems to be faulty. What I meant is that WB works with templates in whci you put content through the editor. It does not use a bunch of solitary HTML/CSS pages.

[port_user]

Thank you Argos. I actually figured out the major problem I had had before, and I apologize for not noticing it earlier.

I could not see the results of the template.css edits, because of Firtefox 3.5 settings (may be default): 'install extensions and themes' on Page Info and 'Open Pop Up Window' were set to 'block.' After I changed both, the results of all edits showed up. I found this out by trying IE....

However, I have a couple of 'excuses:' even with the previous settings I was able to see the edits of one of the template's sections; also the copied from the Word text DID change some of the 1024 fonts (though you said it should not and I agree). I don't know whether these weird things were happening due to the faulty template or my installation or the Firefox...

I'm still not sure (based on your comments) whether it's normal to have different templates set for different pages on the site. It looks like WB allows it through settings, and it's a good feature to have (I hope it's not happening due to the faulty installation).

Note: I do everything locally at this point on XAMP.

[Argos]

Pasting Word into the editor can and will probably design stuff like colors, fonts, font sizes, etc. But the content (so everything you put in the editor) is not part of the template, even though there are probably content styles in the stylesheet that comes with the editor. Pasting styled content (wether from Word or another styled source) will almost certainly override the styles from the stylesheet. So the Word stuff did not change the font settings from the template, or the template itself. It just overrode it, because styles from the editor are local styles, and local styles always override css file styles.

Yes, it's perfectly allright to have different templates for different pages, that is exactly what that function is for. You set a default one for the whole site, but if you set another template on page level, the page level one takes over. Just like local styles take over from default styles.