Page: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 ... [21]
Thread starter
Preview How to install (Firefox only): 1. You need to install the extension Stylish. This allows the user to add custom CSS on a site. 2. Navigate here and click "Load into Stylish" and then "Save". 3. Done Alternative Themes: No banner Clock restored Clock restored and no banner Retro MrBasil in the logo Retro MrBasil and clock restored To use one of these: 1. Right click the icon in the status bar 2. Right click "Vusys' Basil Theme" 3. Delete all the text in the bottom text box and replace it without one of the ones above. Things to come: Removing the sidebar in the forums. (This is actually already in the code, but commented out as it's not prefect yet) Improved images. Other general tweaks. A quick overview on making a theme. Things you will need to make a decent theme Program(s) that can create images including alpha transparent PNGs (or GIFs, but GIFs suck). Some elementary knowledge of CSS and/or the ability to learn new skills. Firefox with the stylish extension. A place to host images. The default CSS of basilmarket Basic synax */ Comment */ .ID {command:value !important} */ = Start comment Comment = Comment text */ = End comment .ID = the ID you want to change. You can find IDs in the HTML of a page or the CSS of the whole site. { = The values to change go in these brackets. command = You can find a list of commands you can use on the web. Common ones include "background" and "color". value = The new value to change to. For the most part, you'll change colours and image URLs. !important = This tells firefox to override any existing CSS (ie, the default theme) to change to yours. } = The close bracket. The banner The banner is made of five different elements. innerWrapday & innerWrapnight .innerWrapday {background:url( URL ) top repeat-x !important;} and .innerWrapnight {background:url( URL ) top repeat-x !important;} Default day image Default night image Change the URL here to change the main background of the banner. By giving different URLs here, you can use different images for day and night. This needs to be an alpha transparent PNG, 820 pixels wide and 80 in height. innerWrapPP1 .innerWrapPP1 {background:url( URL ) !important} and .innerWrapPP1 {background:url( URL ) !important} Default day image Default night image This changes the image with "BasilMarket" and "MapleStory HQ" with MrBasil on it. Unlike innerWrapday/night, you cannot change this depending on if it's day or night. This needs to be an alpha transparent PNG, 249 pixels wide and 80 in height. innerWrapPP2 innerWrapPP2 is the element that contains the user's avatar. There is not much to do with this other than remove it if you don't want it shown. innerWrap This is the whole banner. Again, not much you can do here; but I've included it because if you don't display it, it removes the whole banner. Some people might like that look. ;) The top gradients and smoothing night & day .night {background:url( URL ) top repeat-x #efeee7 !important;} and .day {background:url( URL ) top repeat-x #efeee7 !important;} Default day image Default night image These are the images that fade from blue to white in the day, and black to white at night at the very top of the page. They can be any height (166 by default) and the bottom must match the background colour of the page (#EFEEE7 by default); the default image is 40 pixels wide, but since this image tiles, it can be any width you want. bwnight & bwday .bwnight {background:url( URL ) top no-repeat #f8f7f2 !important;} and .bwday {background:url( URL ) top no-repeat #f8f7f2 !important;} Default night smoothing Default day smoothing As you may see, these images smooth the top of the main column. They are non-transparent GIF images. You must recolour the centre of them to the background of the main column (#fff by default). The edges should be curved with the colour of the part of the background gradient that they will be next to. Column headers You find these in various places on the site. Left are the columns that are only on the main page in green; strangely on the left and right, (but not the centre). Right are the columns on the front page in the centre, and are also found as the background of the text "Thread starter", "Replies" and "Reply" on a forum thread. right .right {background:url( URL ) !important;} Default right image As you can see, right must tile and be 23 pixels in height, however as long as it tiles correctly, it can be any width you want (within reason, of course) left .left {background:url( URL ) !important;} Default left image For reasons unknown, left is also tiled however the image is longer than it needs to be (256 pixels wide). You can change it to any image that tiles correctly and is 24 pixels in height. topicBar .topicBar, .bbTop {background:url(http://www.basilmarket.com/img/topicbar.gif) top no-repeat #F8F7F2 !important;} Default topic bar This is the big header on forum topics and on a BasilID. It needs to be 800 pixels in width and can be any height up to 70 pixels. If it is less than 70 pixels, the background colour will show below. Other parts of the site topMsg .topMsg{background:url( URL ) !important; border:1px solid #CCAA00 !important} The default background is a solid colour, however I changed it to an image. To use a solid colour, use "background: color", or to use an image, make a repeating tile that's 26 pixels in height. The border colour can be changed here too. sub_menu This controls the dropdown menus. You can make the dropdown menus tranparent with "opacity: 0.9". Change 0.9 to any other number between 0 and 1 to alter the transparency. The background can be changed to a different solid colour, or (in theory) an image although I've not tried this. Changing the border would be rather easy too. Forum tweaks postSubn .postSubn {background:url( URL) !important} Default post back This is the background an avatar stands in front of in a post, or on a BasilID. It must be 100 pixels in height, can be any width since it tiles, and must be the colour of the post background at the bottom (#EFEEE7). postSubn is used for a few other things that can you change, but I won't detail them here. New Blog: Your comic sucks
Replies
Very pretty, but I like seeing my picture up there.
New Pic: Maple Rush
megafiend said: "Very pretty, but I like seeing my picture up there." It's still there. New Blog: Your comic sucks
Wow its really good, but the only thing is i dont like the banner xD.
I would very much like to use it, but I use Google Chrome. x-x
SonGokuFood said: "Wow its really good, but the only thing is i dont like the banner xD." You can edit the script to change anything. You'll need a 820x80 pixel image with transparency for the banner ;D New Blog: Your comic sucks
I like it so much :D
Especially since my char looks like he's going to whack Mr.Basil with his bat :3 Great job with the theme!
it looks yummy, but doesn't work for google chrome >.<
New Blog: o noes!
vusys said: " You can edit the script to change anything. You'll need a 820x80 pixel image with transparency for the banner ;D" I have no idea how to do or make one of them/that/those xD. SonGokuFood said: " I have no idea how to do or make one of them/that/those xD." :[ You could just comment out the part that changes the banner, that'll revert it back to the default while leaving the other changes in place :] New Blog: Your comic sucks
vusys said: " It's still there." Oh, whoops. Lol. Didn't notice you were there twice. New Pic: Maple Rush
vusys said: " :[ You could just comment out the part that changes the banner, that'll revert it back to the default while leaving the other changes in place :]" Two things. One: How do you change the banner? I don't get your instructions  Two: You should make the home page clicking place (left side of banner) shift so that you click the BasilMarket place instead.
The clock is used for auctioning purposes. I don't really like the banner. The font is a little big, and the random maple chars mess up the simplicity of the original banner. It's crowded and what would happen if a new admin was hired (I don't know if that will ever happen, but it's still a possibility)?
Other than that, your idea is pretty nice. The headers are nice, and I like the translucent menu. |
