Skip to main content
Topic: Mobile View and Theme Editing (Read 35 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Mobile View and Theme Editing

Hey guys.

Started styling my theme and I have a few questions...

1) I have changed the color throughout the theme for the most part, but when viewing it on my phone I see some green that I'm not sure how to change (See attachments). I'm assuming its a PSD file? Can anyone help with this?

2) I'm also wanting to add some html code in the head section so users can add the app icon image on their phone (Safari).
Example:
Code: [Select]
<link href="http://www.smokedhaze.com/forums/apple-touch-icon-forums.png" rel="apple-touch-icon" />
<link href="http://www.smokedhaze.com/forums/apple-touch-icon-forums-180x180.png" rel="apple-touch-icon" sizes="180x180" />
<link href="http://www.smokedhaze.com/forums/andriod-forums-hires.png" rel="icon" sizes="192x192" />
Where do I need to add this, what file?

Re: Mobile View and Theme Editing

Reply #1
In themes development/tweaking, most of the times your best friend is the "development tools" of your browser (usually right click and "inspect" or something similar).

This seems to be 1.1, right?
If so, the icons at the bottom of the board index are SVG, created and styled in icons_svg.css.
The color there is expressed a little bit differently, instead of "#123456" is "%23123456" (i.e. the "#" is replaced by "%23").
The icons you are looking for are .i-board-new::before and .i-board-redirect::before.
Each one of the two have 4 colors defined:
Code: [Select]
stop-color='%235FA77B'
stop-color='%23539442'
stop-color='%23539442'
stop-color='%235FA77B'
for the 4 different pieces they are composed of.
You can change these colors and the icon will change correspondingly.

The border around the menu icons is defined in the section:
Code: [Select]
@media screen and (max-width: 64em)
by the class:
Code: [Select]
.icon-menu

As usual, my recommendation is to use a custom.css or a custom_{variant_name}.css (if you search the forum you'll find some useful hint about them) in order to apply your customizations, so that you don't have to edit "core" files. ;)
Bugs creator.
Features destroyer.
Template killer.

 

Re: Mobile View and Theme Editing

Reply #2
I lost the question number 2: well, that code (in the general form that should be valid for any browser) is already in the header. Is that not enough?
Bugs creator.
Features destroyer.
Template killer.