Skip to main content
Topic: Mobile View and Theme Editing (Read 4141 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.

Re: Mobile View and Theme Editing

Reply #3

Sorry for taking so long to respond back. I ticked the 'notify me' of any new posts, but received none.

Yes I'm using 1.1 - link is here. You're talking a little over my novice web-brain. But I do appreciate the response! Let's try and resolve one issue at a time and see if that helps me understand it better.

Ok, I'm using the same theme you have here, basically I'm just trying to remove all the green and theme it to my site's orange. I have themed about 95% of it by using my browser's inspection tool. I can't for my life find a icons_svg.css file anywhere. Or figure out where to locate it via inspecting the source.

If we could start out with just helping me find it, that would help!

Re: Mobile View and Theme Editing

Reply #4

Welp, found it. The problem was, I was looking in the zip folder I downloaded from this site. It is not in that. It is however online. It must have generated the icons_svg.css file when I ran the initial installer. Not sure why you guys out-sourced this information and didn't keep everything 'in-house' so to speak. I can see the benefits from the developer's end, but it's not very user friendly.

Moving on: Can't find much info on converting svg color to rbg aka % to # or a color chart that explains it. Simply adding #E19105 isn't doing it.

Re: Mobile View and Theme Editing

Reply #5

Here is the code:
Code: [Select]
.i-board-redirect::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3ClinearGradient id='brdGrd' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%235FA77B'/%3E%3Cstop offset='35%25' stop-color='%23539442'/%3E%3Cstop offset='60%25' stop-color='%23539442'/%3E%3Cstop offset='100%25' stop-color='%235FA77B'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23brdGrd)' d='M24 20v-4H14v-4h10V8l6 6zm-2-2v8H12v6L0 26V0h22v10h-2V2H4l8 4v18h8v-6z'/%3E%3C/svg%3E");
}

All I want to do is add a simple border with the RBG value of #E19105. If someone could show me an example of how to do this I'd appreciate it!

Re: Mobile View and Theme Editing

Reply #6

Sorry!
I read your message on the mobile marked as unread but I lost it later on... :-[
Bugs creator.
Features destroyer.
Template killer.

Re: Mobile View and Theme Editing

Reply #7

Code: [Select]
.i-board-redirect::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3ClinearGradient id='brdGrd' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23E19105'/%3E%3Cstop offset='35%25' stop-color='%23E19105'/%3E%3Cstop offset='60%25' stop-color='%23E19105'/%3E%3Cstop offset='100%25' stop-color='%23E19105'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23brdGrd)' d='M24 20v-4H14v-4h10V8l6 6zm-2-2v8H12v6L0 26V0h22v10h-2V2H4l8 4v18h8v-6z'/%3E%3C/svg%3E");
}
As I wrote above, instead of "#123" you have to look for "%23123", in other words the "#" is replaced by "%23". :)
Bugs creator.
Features destroyer.
Template killer.

Re: Mobile View and Theme Editing

Reply #8

Yeah I got that part, thanks. It's confusing because I'm unable to find much documentation on how to style it, or for that matter how to match a SVG color to a respective RGB equivalent.

For Example: Let's take this svg color %235FA77B how to do you even find what the color looks like? I have searched everywhere for a chart that converts this color, or that will even show what the color looks like, to no avail.

I got a little frustrated because everything I was trying wasn't working. I happened to check it on my phone and did notice the changes. I tried refreshing my browser, clearing it's history. I even tried using Chrome, IE and Mozilla, no changes to it, anywhere.

The problems comes from my Website provider, I have a support ticket opened up on it. The Website cache doesn't populate correctly.
Last Edit: October 21, 2017, 04:12:15 pm by Bodacious

Re: Mobile View and Theme Editing

Reply #9

It's the "usual" hex representation, rather common in CSS, if you are used to the rgb, you can use something like http://www.rapidtables.com/convert/color/rgb-to-hex.htm to convert it.
Bugs creator.
Features destroyer.
Template killer.

Re: Mobile View and Theme Editing

Reply #10

You keep missing my question completely. Maybe it's the way I'm asking it, dunno. Let me try again.

I use Adobe CS6 , where it is easy to find the Hex, CMYK and RGB colors easily. The Hex color is identified with a # followed by '6' digits. This gives us a visual color to identify it by. And you can take its R,G,B identifier (255,255,255) which each colors highest value is three digits, making a total of '9' digits.

ok now...

Let's look at the icons_svg.css. As you stated in your first post, in this thread, some lines of code have 4 different sets of colors to make a gradient effect. It uses a % followed by '8' digits to identify this color. So now how do we know what each of the 4 sets of numeric values represent visually, so we can produce the desired gradient effect?

Well, let's take the SVG color value of %235FA77B and try and determine what it actually looks like, visually. I'll insert it in your Hex converter that you posted. Leaving out the % and only inserting 235FA77B. See my question now? It doesn't recognize '8' digits. So how can one find a way to go through 390 lines of code inside icons_svg.css and see what each color value is, visually.


Re: Mobile View and Theme Editing

Reply #11

Well, apparently we do not read each others posts, I explained that part two times already. ;)
First time:
Quote from: emanuele – The color there is expressed a little bit differently, instead of "#123456" is "%23123456" (i.e. the "#" is replaced by "%23").
Second time:
Quote from: emanuele – As I wrote above, instead of "#123" you have to look for "%23123", in other words the "#" is replaced by "%23". :)
The only way I can make it more clear is to use exactly your example, so:
Code: [Select]
#5FA77B
is equal to:
Code: [Select]
%235FA77B
# = %23
So instead of "#" in the SVG code you have "%23".
That means when you see "%23" you read it as "#". and so the first two of the 8 numbers you see are after % always 23 and are always a replacement of the "#" and are not part of the color code.
Bugs creator.
Features destroyer.
Template killer.

Re: Mobile View and Theme Editing

Reply #12

You certainly did. I just wasn't formulating a mental image of how you were saying it. My bad.

Ignore all but the last six digits of any givin hex sequence to identify its color i.e: %23888888  got it.

... and to think of the time I wasted, searching for an imaginary 8 digit hex converter  ::)

Re: Mobile View and Theme Editing

Reply #13

It happens! :D
Bugs creator.
Features destroyer.
Template killer.

Re: Mobile View and Theme Editing

Reply #14

I have another question, lol.

In mobile view, when you click on a icon (See Attachment) how can I find this green border color, so I can edit it?