1
JohnCVermont
How did I change the "look" of left & top menu/nav items?

Hello All -

I apologize in advance for this exceptional simple question but the answer has eluded me. Somewhere in the "admin" section of a simple (installed with defaults) XOOPS site, I "dragged my feet" and now the "look" of the left & top menu items changed. I can't find where to turn them back to their original styles.

(I would include a picture but I can't seem to figure out how to attach/insert the file to this posting)

(Actually, I just learned how to "post" a picture..so to speak)

Visual Aid

Resized Image

My Specifics :
Xoops 2.0.6, mySQL 4.0.18, Apache 1.3.27, PHP 4.*, Windows XP

Cheers,

2
Herko
Re: How did I change the "look" of left & top menu/nav items?
  • 2004/5/12 17:32

  • Herko

  • XOOPS is my life!

  • Posts: 4238

  • Since: 2002/2/4 1


Never apologise for asking simple questions, or we would have never made it beyond the kindergarten

Quote:

I "dragged my feet" and now the "look" of the left & top menu items changed

Well, that's a very clear description of what you did. I advise you do that thing you did but then in reverse

No seriously, the look changes can be due to a change in the style.css file in the theme folder, because the menu blocks are just tables with style classes. Did you make any changes to that file?

Herko

3
JohnCVermont
Re: How did I change the "look" of left & top menu/nav items?

Ah...but if I could Kind Sir..retrace my steps backwards..I would navigate back out of this briar patch. (apologies for mixed metaphors) However I was, at the time, so awestuck by the wonder that is Xoops, I just found that I had created an effect that I didn't intend. (However, it is the proper suggestion, I should know better after all of these years)



With utmost sincerity, I am quite certain that I did not directly edit any *.css. I do remember only "point & clicking" around the various screens within the SystemAdmin module.

Perhaps, another approach ... how do I "easily" change the style of these menu/nav items?

Cheerfully, Sincerely, and Thanks in Advance,


4
Bassman
Re: How did I change the "look" of left & top menu/nav items?
  • 2004/5/12 22:18

  • Bassman

  • Friend of XOOPS

  • Posts: 1272

  • Since: 2003/5/23


Did you perhaps change the default theme in the admin menu?

Go to Administration Menu > System > Preferences > General Settings and select your default theme.

5
JackJ
Re: How did I change the "look" of left & top menu/nav items?
  • 2004/5/12 22:32

  • JackJ

  • Community Support Member

  • Posts: 747

  • Since: 2003/8/31


you could perhaps copy and paste this into your text editor and read it sometime..

Themes and Design

Xoops comes with a small selection of themes, sometimes called "skins". Many hundreds of other ready made themes are available for download. Users then change the logo and look to suit their preferences. In practice many users choose a theme which has an appropriate layout, and alter the appearance by changing the themes html file and style sheet in the theme's folder. Some webmasters have created stunning individual looking sites.


If editing your theme.html or the style sheet(s) based in your theme folder and you wish to see changes immediately, go to your site admin, and let your mouse hover over the System Admin Icon--then choose Preferences-->General Settings, and look for this field:

Update module template .html files from themes/your theme/templates directory? Set this to Yes

If this option is enabled, module template .html files will be updated automatically if there are newer files under the themes/your theme/templates directory for the current theme. This should be turned off once the site goes public.

Logo

To change your logo, right click on the logo on your site and choose "Properties". This will show you the path to your logo and the name of your logo file. Go to the same file on your server and overwrite this with your own image, renaming your image with the same name as the exiting logo. Dimensions for the image can be changed in the theme.html in your theme folder

Three themes come with your XOOPS install. They are located here:

www.yoursite.com/themes

default
x2t
phpkaox

To change your default theme you go to:

System Admin-->Preferences-->General Settings and go to the "Default theme" dropdown box. The theme called "default" is the theme that loads on install.

To edit the look of your theme you can go to your theme folder and edit theme.html and style.css inside the folder. Some themes also have styleNN.css for Netscape, and styleMAC.css for Mac computers.

Remember: If you are editing the theme.html and style.css files in your themes folder and nothing appears to change, you must set this:

Update module template .html files from themes/your theme/templates directory to "YES" in System Admin-->Preferences-->General Settings


Templates:

Most themes use the default "Template". Templates control the layout and some behaviors and functions of individual blocks and modules. Most existing XOOPS themes are based on the XOOPS "default" template.

You can't edit the default template, you must clone it first, and edit the clone. To clone the default template

Go to System Admin-->Templates, and click Clone next to the default template, you may call this clone anything you wish. XOOPS will install the clone. After you have done this, go to system admin-->preferences-->general settings and make the clone your default Template (not theme)

Then go back to System Admin-->Templates. a tick should be to the right of the default template. You may need to click on "Generate" if any of the module files have a "red" generate link.

Editing a block's layout:

Your Blocks layout is controlled from Templates and related style.css classes. Go to System-->Admin-->Blocks and look for the block you wish to alter. Then click "Edit" to the right of the block. In the next dialogue box you will see "Edit Template". Click this, and you will see the code for your block. You will also see the "classes" that are being called which relate to the style.css sheet in your themes folder.

Practice uploading a template.

Most existing themes are based on the Default Template. Some themes you download may have its own template. These template files are in a compressed format. tar.gzip

To upload a Template to XOOPS the file must be in this tar.gzip format.

In your extras folder their is a "tar" template for the X2T theme. To upload go to System Admin-->Templates, and go to the Upload browse box and browse to this "tar" file in your local computers XOOPS download:

Look for the folder called "extras" inside that folder you will find this folder:

theme_x2t

Select this file: x2t.tar.gz and upload

You can call this anything you like, if you don't add a name XOOPS will just add a default name. After you have done this, go to system admin-->preferences-->general settings, and make x2t your default theme, and also choose the template you uploaded as your default template. (there is drop downs for both)

Then go back to system admin-->templates, and you will see a tick to the right of your default template. You may need to to click "generate" to create the editable files for individual modules you install.

See this on the "Wiki" for more explanation about Themes and Templates"

http://wiki.xoops.org/wakka.php?wakka=ThemesVsTemplates

Downloading and Installing Themes

You can of course download other themes and upload them into your themes folder on your server using FTP to:

www.yoursite.com/themes

Be careful to upload the correct folder structure. Your download may have a folder inside a folder when you uncompress the files

themename (not this one)
themename (upload this one with the theme.html and other files inside)

Once again go to system admin-->preferences -->general settings, and make your new theme your default. XOOPS will recognize the theme you uploaded.

Tip

A handy tool for visually editing themes is to launch the theme changing "block", this will allow you to see and edit the appearance of the themes without changing the default theme. To do this go to System Admin-->Blocks and activate the "Themes" block.

In system admin-->groups you can make this block only visible to webmasters if you wish. If you wish the block to be visible to anonymous users go to System Admin-->Groups-->Anonymous Users, click Edit, and put a checkmark in the themes block, and then click update

6
JohnCVermont
Re: How did I change the "look" of left & top menu/nav items?

Executive Summary
Problem solved.

Root Cause
I was a complete moron and missed the obvious

Acknowlegements

Thank you to both BassMan & JackJ for their timely remarks & encouragement. What was especially helpful was the "Themes Block" tip.

Rantings of a caffiene deprived geekus extremus

It appears that my problem was a combination of not setting the default theme properly such that it was persistent..and... confusing the x2t theme interactions with the default XOOPS banner graphic(?). Using the "themes block", I was able to alleviate my confusion by switching between the available themes by use of the themes block (Ref: JackJ's previous note). This allowed me to see that what I thought was some sort of strange side effect was in fact the interaction of the top navigation "buttons" (table elements of the banner header)of the x2t theme with the backcolor of the header. Simply put...it was supposed to be like that. When I looked at the HTML source, it all became much clearer. "Use the Source, Luke"

Header Code from my home page with x2t theme...
<!-- Start Header -->
<
table cellspacing="0" cellpadding="0" width="100%" border="0" style="background-color : #2F5376; color: #ffffff">
  <
tr>
    <
td height="70" width="150" valign="middle" align="left" rowspan="2">
    <
a href="http://je266a.mikenet.smcvt.edu/xoops"><img src="http://je266a.mikenet.smcvt.edu/xoops/themes/x2t/logo.gif" alt="" /></a></td>
<
td valign="middle" align="center" width="100%">
&
nbsp;
</
td></tr><tr>
    <
td width="100%" valign="bottom" align="right" class="navbar" >
    <
table border="0" cellpadding="1" cellspacing="0">
       <
tr>
         <
td class="tabOff" onmouseover="this.className='tabOn';" onmouseout="this.className='tabOff';"><a href="http://je266a.mikenet.smcvt.edu/xoops">Home</a></td>
         <
td class="tabOff" onmouseover="this.className='tabOn';" onmouseout="this.className='tabOff';"><a href="https://xoops.org/modules/newbb/">XOOPS Support</a></td>
         <
td class="tabOff" onmouseover="this.className='tabOn';" onmouseout="this.className='tabOff';"><a href="https://xoops.org/modules/xoopsfaq/">XOOPS FAQ</a></td>
       </
tr>
    </
table>
     </
td>
  </
tr>
</
table>
<!-- 
End Header -->


Pictures are indeed worth a thousand words

Home Base, where I started, nice

Picture #1 -- Home Base...nice

Picture #2 -- Another theme...that is nice too

Picture #3 -- The picture that removed my brain cramp...duh..

Concluding Comments

As a matter of fact, I did read the aforementioned Wiki article prior to posting. While the wiki article was useful in explaining the technical differences between a theme and a template. The article lacked a certain HowTo/Primer/Tutorial/FAQ quality that is often useful for newcomers attempting to troubleshoot issues in a new environment or system. That's where the "Themes Block" tip proved so useful for this newcomer.


Troubleshooting and debugging are still more Art than science where experience counts as much as raw talent or skill.




Cheers,


Login

Who's Online

226 user(s) are online (174 user(s) are browsing Support Forums)


Members: 0


Guests: 226


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Apr 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits