4.0 Graphics Developers' Kit Guide
Collapse
X
Collapse
-
4.0 Graphics Developers' Kit Guide
Editing vBulletin 4.0 default graphics to match your customized style with the 4.0 GDK is very simple. Here are a couple example cases of graphic customizations you can make on Adobe Photoshop (I'm using version CS4 here).
Single-layer monochromatic icons
This includes the single-color and single-layer icons found in /buttons, /site_icons, etc. A simple Color Overlay changes the colors of these icons. In Photoshop, double-click the layer that contains the icon to open the Layer Style window (or right click the layer >> Blending Options), then click Color Overlay and set it to the desired color.
Multi-layer graphics
Other graphics have multiple layers which you can edit separately in the Layer Style window. For the forum blocks tab (/misc/tab-collapsed.psd), I edited the Gradient Overlay and Stroke of the bottom layer and the Color Overlay of the top layer.
Status Icons
The Forum and Thread status icon master PSDs (/statusicon/thread-status-master.psd and /statusicon/forum-status-master.psd) are inclusive of all the layers which denote various statuses. For instance, thread-status-master.psd is composed of Deleted, Replied, Closed, and Moved layers, Read and Unread layers, and the Base layers. Here, I edited the Fill of the Base layer and the Color Overlay of the Unread layer to fit my style.
Similar changes to the base of forum status icon.
Of course, you can swap out the images directory files completely without using the GDK as frame of reference. However, keep in mind that changing the dimensions of the images can cause layout issues, so template edits will probably be a necessary accompaniment to image dimensional changes.
For inspiration, this thread has a great collection of custom skins. Happy modding!Tags: None-
#51thincom2000 commentedSun 27 Feb '11, 9:56amEditing a commentAfter downloading the ZIP again, I notice it hasn't been updated since last January. Will there be an update soon for the icons used in the Mobile style?
-
#52avec une femme commentedMon 24 Dec '12, 11:51amEditing a commentDo you need to have photoshop to use this? I get lost once I have unzipped the files..Can someone help?
-
#53Shotgun_16ga commentedThu 11 Jul '13, 2:52pmEditing a commentGetting error that it is not there. Is there reason I can't download this?
Posting comments is disabled. -
Related Topics
Collapse
-
by alfreemaI'd like to change the color of the double down arrow in the Topics list. When I inspect it, it appears to have the class:
b-icon__double-arrow-down--blue
are there any other...-
Channel: Support Issues & Questions
-
-
by Claire SRHello,
Would you please let me know how to change the color of the speech icon to green instead of the attached blue icon ?
Please advise me.
Thank you1 Photo-
Channel: Support Issues & Questions
-
-
by ZipsI'm working on a dark theme for my site so that my users can optionally use it if so desired. I'm running into a couple of issues though. For the life of me, I cannot figure out what stylevars influence...
-
Channel: Support Issues & Questions
-