ElkArte Community

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:

<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?

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:

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:

@media screen and (max-width: 64em)

by the class:

.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. ;)

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?

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 (http://www.smokedhaze.com/forums/index.php). 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!

Here is the code:

.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!

Sorry!
I read your message on the mobile marked as unread but I lost it later on... :-[

.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". :)

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.

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.

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 (http://www.rapidtables.com/convert/color/hex-to-rgb.htm) 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.

Well, apparently we do not read each others posts, I explained that part two times already. ;)
First time:
Second time:
The only way I can make it more clear is to use exactly your example, so:

#5FA77B

is equal to:

%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.

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  ::)

It happens! :D

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?

I remove that border from all menu buttons in my theme but I cannot remember how I did it. I will check once I am on my pc later.

Modify this in your css.

.icon-menu:hover {
  border-color: your color here
}

That should be correct except that it only shows in mobile or smaller screen so don't forget:

@media screen and (max-width: 64em)

Thanks fella's, worked like a champ  ;)

One day or another we'd need a color picker. O:-)