Making My Own Theme »  Show posts from    to     

Icy Phoenix


Old Styles Topics - Making My Own Theme



Codi [ Thu 22 Jan, 2009 19:28 ]
Post subject: Making My Own Theme
Hi every one.

Well, I need to make a new Theme/Style, and I am not really sure about how to do that.
I am going to start with a style-base, and, once knowing the path of the link of each part I want to customize, then I will change for the archives I want in the place instead.

But where exactally can I change the text color and size in each part of the forum?

Do you style-makers, use any program to make all the process faster and easier?


I'll be using this topic as reference each time I need help, for every body who needs the information as well.

Thanks, and sorry for the bad english.
(I didn't find any topic with that information. That's why I created this one)


Lopalong [ Thu 22 Jan, 2009 21:12 ]
Post subject: Re: Making My Own Theme
Codi wrote: [View Post]

Do you style-makers, use any program to make all the process faster and more easy?


No, and you are going to have to spend a lot of time learning things by yourself, as it is very difficult for two people to work on one theme, and in particular; themes as complicated as Icy Phoenix.

That means that you will have have a good understanding of IP Theme Structure, html and .css

By all means post your questions, but if you don't get an answer - Please don't be disappointed - as what you are suggesting, is a big ask. ;)

Maybe we need a "Theme-Makers" forum, but that won't happen until after the release of the next version of IP (or ever) because it's getting enough people interested in doing something for IP is the biggest problem. :(


Codi [ Sat 13 Jun, 2009 08:25 ]
Post subject: Re: Making My Own Theme
Haha, I love chalenges!

I've already started, and, I'm doing as I said: Not a biiig deal: I'll change the blocks and images based on a ready theme (in this case, Milky Way Red).

It's getting pretty cool, and when it gets finished I'll show you guys.
Now I need two answers:

1 - How can I change the main backgound color, and replace it using a thing gradient image which must repeat itself horizontally? (the path of the file which contains its information and what must be the respective changes)

2 - Can anyone specify each group of paths where I can change all the texts colors? (at least the most important ones: Topic texts, Topic titles, titles in the forum, links, etc)

I would really appreciate that. :)


And, Isn't there not even a site where I can learn more about customizing my own theme?
P.S.: Did I say ''more easy'' in the upper post? Oops, I meant easier. :lol:


novice programmer [ Sun 14 Jun, 2009 13:51 ]
Post subject: Re: Making My Own Theme
Codi, for the both of your questions, you will have to change it via CSS. Sorry, I am not familiar with CSS language.

I would recommend you to try firefox with some plugin as firebug. it shows you the css file and the values for each element. MG uses very descriptive names, so you would not mis-understand anything.


Codi [ Mon 15 Jun, 2009 03:37 ]
Post subject: Re: Making My Own Theme
Thanks np!
I'll try this plugin when they release the new version - cause the one I use is not compatible.

But, if someone knows, please tell me what file is the one which countains the body tables information, because I need to change its spacing.


untitled-2


untitled-1

Circled by green are the font colors I wanna change. What is the file to aplly the modifications?
And also, where can I modify the main background (put a self repeating image instead) and the tables background?

MG, Limun, I need you! :giveup:


DWho [ Mon 15 Jun, 2009 10:16 ]
Post subject: Re: Making My Own Theme
main background is the body part of your templates css, fonts are governed by different css code depending on what part you want changed....

Two ways to find this....

1. Goto your ACP/styles and templates/settings and turn on Add tpl filenames in html then when you are on a page for example index.php if you click on the source code it will show you in green the tpl files that build up that page... there you can find the tpl file for the code you wish to change and then find the class for that code...

A long way of doing it

2. if you are using firefox there are great webmaster add ons for finding css codes and colors...

look for..

Web developer 1.1.6 this gives you huge features for finding anything in a web page..

colorzilla... a great little tool it sits in the bottom of your browser you click on it a small cross appears you point it to the area you wish to change and it it shows you the html color format and the class on the css...

I hope that helps...

:mrgreen: :mrgreen:


Codi [ Wed 17 Jun, 2009 07:06 ]
Post subject: Re: Making My Own Theme
I thank all of you for your support!
It's been REALLY helpful.

It's getting nice... www.lardosrpgs.com/durmstrang
The forum is good looking too.

One more question...
Actually, two :P , which I couldn't find the answer anywere and anyhow:

1. Where can I change the path of the custom avatars (for exemple, instead '... .gif' I want to have 'images/avatars/default_avatars/member.png')?

2. I wish I could put more of the menu_sep image menu_sep on the silver bars, I mean, really ON, cause I tried to set it on the image itself using Photoshop (the silver bar background), and the result was not very good; the dot got under the titles, and I just want it to bee three or four by each side the titles (like in the "Login/Logout Home Forum ..." bar), and not under them.

I tried to find the 'menu_sep' file using Dreamweaver to localize the lines and improvise a change, but I couldn't even find it.
If someone finds it, where should I put the code for the image to go on the bar, likewise the "Login/Logout Home Forum ..." bar? And what would be the code?

I want this result:
untitled-1-1


DWho [ Wed 17 Jun, 2009 11:15 ]
Post subject: Re: Making My Own Theme
Codi wrote: [View Post]


1. Where can I change the path of the custom avatars (for exemple, instead '... .gif' I want to have 'images/avatars/default_avatars/member.png')?



goto your acp/configuration/site.. scroll down to you see Set a default avatar and change it from member.gif to member.png


Codi [ Wed 17 Jun, 2009 18:20 ]
Post subject: Re: Making My Own Theme
Ah, thank you ver much, NP!
I can belive that I couldn't think of that by my own! :D


And What abou the 2?


DWho [ Wed 17 Jun, 2009 20:07 ]
Post subject: Re: Making My Own Theme
Codi wrote: [View Post]
Ah, thank you ver much, NP!
I can belive that I couldn't think of that by my own! :D


And What abou the 2?


its DWho.. not NP... and for number 2 I have no idea...

:mrgreen: :mrgreen:


Yros [ Thu 18 Jun, 2009 03:56 ]
Post subject: Re: Making My Own Theme
Add a blank area around your picture.
For sample your picture is this ' X ' and the blank is this ' ==== '
Do something like that :
====X====

of blank and add it via .css, using repeat function :
====X========X========X========X========X========X====


Lopalong [ Fri 19 Jun, 2009 13:02 ]
Post subject: Re: Making My Own Theme
Codi wrote: [View Post]
And What about the 2?


Before you worry too much about images etc, you will need to address what colours you are going to make the text and the links.

Why? Because at present there are no IP themes that have stark contrast between the headers and the tables - E.g - black and white.

If you make the links / text in the headers a light colour - Then the text / links in the "light" tables will disappear, and vice-versa.

Better you sort that out first.

Because if you want for example, black text in the tables and white text in the headers - then you are going to need to edit a whole lot of templates, and the .css to add new classes.


Mighty Gorgon [ Wed 08 Jul, 2009 12:05 ]
Post subject: Re: Making My Own Theme
Lopalong wrote: [View Post]
Because at present there are no IP themes that have stark contrast between the headers and the tables - E.g - black and white.

That is not true... among the others there are Milky Way Red (& Blue), Floreal and also proSilver IP.

To solve that issue you only need to add few lines in the CSS.

You can check the different classes used in CSS for those themes to understand what I mean... If you cannot find them I will help.


Codi [ Sat 25 Jul, 2009 04:42 ]
Post subject: Re: Making My Own Theme
The text color replacing was really easy. But I'm rally concerned about this lil detail.

Quote:
To solve that issue you only need to add few lines in the CSS.

Okay, that's what I supposed :D


Which is the file that contains the bar information?
MG, if you programmed it making the 'menu_sep.png image' be between the links on the bar, I just need to know how to keep repeating it even after the links, in both bars, the main one and the forum ones, alike the picture I showed you up. What the file is and how to apply the changes.

Thanks.


Codi [ Fri 31 Jul, 2009 04:51 ]
Post subject: Re: Making My Own Theme
Up!


Lopalong [ Sat 01 Aug, 2009 10:34 ]
Post subject: Re: Making My Own Theme
Mighty Gorgon wrote: [View Post]
That is not true... among the others there are Milky Way Red (& Blue), Floreal and also proSilver IP.


Ok, so I was wrong a little bit! But from what I can see, he's working with IPv1.27* and from memory, that didn't have so many style options. :mrgreen:

Could be wrong again! :P


Mighty Gorgon [ Fri 07 Aug, 2009 12:58 ]
Post subject: Re: Making My Own Theme
Lopalong wrote: [View Post]
Mighty Gorgon wrote: [View Post]
That is not true... among the others there are Milky Way Red (& Blue), Floreal and also proSilver IP.


Ok, so I was wrong a little bit! But from what I can see, he's working with IPv1.27* and from memory, that didn't have so many style options. :mrgreen:

Could be wrong again! :P

You are right about 1.2 but we now have 1.3 and the code could be taken from the new CSS since that part has not been changed from 1.2.

Codi I will personally not help in anything 1.2 (specific) related... but of course you can find here someone else who is willing to help with old issues. :wink:

Codi wrote: [View Post]
MG, if you programmed it making the 'menu_sep.png image' be between the links on the bar, I just need to know how to keep repeating it even after the links, in both bars, the main one and the forum ones, alike the picture I showed you up. What the file is and how to apply the changes.

I think that the best way to achieve this is by creating a new image with the spacing you need, so you don't have to mess things up in the CSS.

For example if you need 20px spacing and your image is 10px wide, then create a new 30px image with your image on the left and 20 empty pixels on the right. :wink:


Codi [ Mon 01 Feb, 2010 17:13 ]
Post subject: Having Images Instead Of Words For Links
In my journey customizing my theme (check how it is going here) my biggest challenge is to find the path of the change I want to make.

Today for example, I can't find out at all how to have an image instead of a word for link. I mean, I want an image saying "login" "forum" "profile" "faq", etc like n those old forums from phpbb2.

And neither can I find out how to change the path of an image from the forum (buttons, corners, etc), cause since I'll be changing the background, I need them to be .png, and not .gif
I tried to change their path n the file style_ice, but nothing happened.


Lopalong [ Tue 02 Feb, 2010 12:38 ]
Post subject: Re: Making My Own Theme
If I'm correct?

Your problem is that you are running with a now deprecated version of Icy Phoenix and nobody is going to support you.

The links/anchors that you can't see, if I'm correct once more as in the screen-shot are all there:

untitled_2_1265110529_889919


How you fix the .css for a now NON-Supported version of IP is your problem - So if you still want to experiment and want to change things like coding/script and markup for a non supported version - - - Then you need to practice until you get it right. Or upgrade to IP-*53? - And then your theme will be absolutely useless. :censored:


Codi [ Wed 03 Feb, 2010 05:36 ]
Post subject: Re: Making My Own Theme
The versions aren't too different, are they?

Why don't you try supporting me with what you know about the new version?
Maybe I figure something out based on how you would do that on IP-*53.


Well, I tried by the most rustic form: through the language file, but the results weren't so good to those words that appear in other parts of the forum (like the word "forum" itself, for example. I just want to change the links on forumline, forumlinenb and quick-links left table. (to put images with the words instead, like home and forum).

I belive it's not css, I think it's HTML, am I right?

I've found this: (with web developer -> show source code tool)

Code: [Hide] [Select]
<tr>
<td class="forum-buttons" colspan="3" width="100%">
<a href="http://www.lardosrpgs.com/durmstrang/index.php?sid=6dc6bd6df3a176129bf0c8dccbf4be67">Home</a>&nbsp;&nbsp;<img src="http://www.lardosrpgs.com/durmstrang/templates/mg_themes/images/ice/menu_sep.png" alt="">&nbsp;
<a href="http://www.lardosrpgs.com/durmstrang/forum.php?sid=6dc6bd6df3a176129bf0c8dccbf4be67">Forum</a>&nbsp;&nbsp;<img src="http://www.lardosrpgs.com/durmstrang/templates/mg_themes/images/ice/menu_sep.png" alt="">&nbsp;

<a href="http://www.lardosrpgs.com/durmstrang/search.php?search_id=newposts&amp;sid=6dc6bd6df3a176129bf0c8dccbf4be67">Novos</a>&nbsp;&nbsp;<img src="http://www.lardosrpgs.com/durmstrang/templates/mg_themes/images/ice/menu_sep.png" alt="">&nbsp;
<a href="http://www.lardosrpgs.com/durmstrang/profile_main.php?sid=6dc6bd6df3a176129bf0c8dccbf4be67">Profile</a>&nbsp;&nbsp;<img src="http://www.lardosrpgs.com/durmstrang/templates/mg_themes/images/ice/menu_sep.png" alt="">&nbsp;
<a href="http://www.lardosrpgs.com/durmstrang/search.php?sid=6dc6bd6df3a176129bf0c8dccbf4be67">Search</a>&nbsp;&nbsp;<img src="http://www.lardosrpgs.com/durmstrang/templates/mg_themes/images/ice/menu_sep.png" alt="">&nbsp;
<a href="http://www.lardosrpgs.com/durmstrang/faq.php?sid=6dc6bd6df3a176129bf0c8dccbf4be67">FAQ</a>&nbsp;&nbsp;<img src="http://www.lardosrpgs.com/durmstrang/templates/mg_themes/images/ice/menu_sep.png" alt="">&nbsp;
<a href="http://www.lardosrpgs.com/durmstrang/login_ip.php?logout=true&amp;sid=6dc6bd6df3a176129bf0c8dccbf4be67">Log out</a>
</td>

</tr>


I will know what to do whenever I find the path to this html general file, if there is one. All that I'll have to do is to change the titles to the url of the images I want instead.

Does anyone know where this file is located?



The only think I could find was this: (in 4 different files, the same code. They are 'templates/mg_themes/overall_header.tpl', 'templates/mg_themes/overall_header_bl.tpl', 'templates/mg_themes/overall_header_sc.tpl', 'templates/mg_themes/overall_header_ss.tpl')

Code: [Hide] [Select]
<tr>
<td class="forum-buttons" colspan="3" width="100%">
<a href="{FULL_SITE_PATH}{U_PORTAL}">{L_HOME}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
<a href="{FULL_SITE_PATH}{U_INDEX}">{L_INDEX}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
<!-- BEGIN switch_upi2db_off -->
<a href="{FULL_SITE_PATH}{U_SEARCH_NEW}">{L_NEW2}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
<!-- END switch_upi2db_off -->
<!-- BEGIN switch_upi2db_on -->
<span style="vertical-align:top;">{L_POSTS}:&nbsp;</span><a href="{FULL_SITE_PATH}{U_SEARCH_NEW}">{L_NEW2}</a><span style="vertical-align:top;">&nbsp;•&nbsp;</span>{L_DISPLAY_U}<span style="vertical-align:top;">&nbsp;•&nbsp;</span>{L_DISPLAY_M}<span style="vertical-align:top;">&nbsp;•&nbsp;</span>{L_DISPLAY_P}&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
<!-- END switch_upi2db_on -->
<!-- BEGIN switch_user_logged_in -->
<a href="{FULL_SITE_PATH}{U_PROFILE}">{L_PROFILE}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
<!-- END switch_user_logged_in -->
<a href="{FULL_SITE_PATH}{U_SEARCH}">{L_SEARCH}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
<a href="{FULL_SITE_PATH}{U_FAQ}">{L_FAQ}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
<!-- BEGIN switch_user_logged_out -->
<a href="{FULL_SITE_PATH}{U_REGISTER}">{L_REGISTER}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
<!-- END switch_user_logged_out -->
<a href="{FULL_SITE_PATH}{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT2}</a>
</td>
</tr>



Am I in the right way?


Mighty Gorgon [ Thu 04 Feb, 2010 00:15 ]
Post subject: Re: Making My Own Theme
Sorry but I can't remember where that code is in the old release (maybe nav_quick_links.tpl and overall_header.tpl).

If you are willing to update to latest version I will help with the correct edits to apply.


Lopalong [ Thu 04 Feb, 2010 12:25 ]
Post subject: Re: Making My Own Theme
Codi wrote: [View Post]
Am I in the right way?


No!

Do everyone a favour and either work out what you need to do with a deprecated version of Icy Phoenix by yourself, or upgrade and do your experimenting with the latest version.

Then we'll all be talking the same language!




Powered by Icy Phoenix