Runboard.com
You're welcome.
Runboard Extra! The Runboard Directory Runboard Knowledge Base

Ugly blue checkboxes in Chrome since the last update? checkbox

See how to fix it here!

Chat room Runboard Knowledge Base (wiki) Search Facebook Twitter





runboard.com       You are not logged in.

 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

Registered: 07-2005
Location: Texas
Posts: 10247
Karma: 272 (+331/-59)
Reply | Quote
Andesine Enigma graphics help please


I am working on an "alternative color scheme" to Josh's Enigma II skin which I am calling Andesine Enigma based on the wild and crazy history behind the gemstone.

I work with PNG, GIF, and JPG images but for this skin, I attempted to create the two images below as SVG graphics. My results are not terrible, but I am asking for help to make the pictures the very best they can be.

Image

Image

---

Advertise Boards On TRDConceptsDE
5/7/2019, 12:05 am Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 25472
Karma: 426 (+479/-53)
Reply | Quote
Re: Andesine Enigma graphics help please


Based on the source code of those graphics you posted, it looks like you embedded pngs into your SVG program and saved them as SVG, which defeats the purpose of using SVG. To create a true SVG, you have to draw it in your SVG program.

The way I do this is to import the original graphic to the SVG program (I use Inkscape), trace it using the various tools, then delete the imported graphic and only save the new drawing.

I sent you an email with the re-created graphics. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/8/2019, 7:44 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

Registered: 07-2005
Location: Texas
Posts: 10247
Karma: 272 (+331/-59)
Reply | Quote
Re: Andesine Enigma graphics help please


Hi LG, thank you for answering my call for help. emoticon

I imported the PNG and then played with it, trying to smooth out the orange-toned border before saving it as an SVG. I didn't do a tracing of the image, which is where I went wrong in the image editing process.

---

Advertise Boards On TRDConceptsDE
5/8/2019, 12:49 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 25472
Karma: 426 (+479/-53)
Reply | Quote
Re: Andesine Enigma graphics help please


You're very welcome, Rick. emoticon

I was thinking tonight. Yes, that can get me into trouble. emoticon You can turn the SVG into a PHP file so variables can be passed to it, like I did with Runboard's navbar.

http://cdn.runboard.com/sp/svg?from=555&to=000
Image

http://cdn.runboard.com/sp/svg?from=ffc&to=cc9
Image

http://cdn.runboard.com/sp/svg?from=900&to=300
Image

http://cdn.runboard.com/sp/svg?from=393&to=050
Image

http://cdn.runboard.com/sp/svg?from=339&to=005
Image

http://cdn.runboard.com/sp/svg?from=005&to=339
Image

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/9/2019, 6:09 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

Registered: 07-2005
Location: Texas
Posts: 10247
Karma: 272 (+331/-59)
Reply | Quote
Re: Andesine Enigma graphics help please


I have not touched the glob.css styling because of Thor's stated desire to have things in that area to be consistent. I have to say though; the red navbar settings make the Andesine Enigma skin pop. May I add this to the skin design?

#rb-navbar, #bookmarks_popup h3 {
  background-color: #630000;
  background-image: url(https://cdn.runboard.com/sp/svg?from=900&to=300);
  background-image: linear-gradient(to top, #350000 0%, #980000 100%);
}

edited so both the SVG and CSS linear-gradient render similar display results

Last edited by Pastor Rick, 5/12/2019, 11:25 pm


---

Advertise Boards On TRDConceptsDE
5/9/2019, 12:09 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 25472
Karma: 426 (+479/-53)
Reply | Quote
Re: Andesine Enigma graphics help please


That should be fine, since Thor gave the ok for Susa to customize her navbars to match her boards.

If you do that, I would go one step further, and give the search box a reddish tint. Maybe #630000?

The main thing about consistency is keeping the same layout, to make navigation easier, and to prevent unexpected anomalies from happening when viewing in devices that a board admin may not have considered.

That said, the navbar is inconsistent when it comes to boards vs non-board pages if you're on mobile. When I mobilized BotB, I copied my mobile styling from the cpanel CSS over to that board, so it's consistent with control panel pages. If you wish to mobilize any of the boards you're working on, you are welcome to borrow my mobile CSS from BotB, which also includes a redesign for the board's layout itself.

Edit to add: If you customize the colors of the navbar, I would add a few more customizations, such as the hover background on the navbar itself (#630000 again?), and the dropdown boxes (maybe that peachy color), and don't forget the hover backgrounds on the dropdowns themselves.

Edit again: Don't forget the "Edit bookmarks" button under "Bookmarks".

Last edited by Lesigner Girl, 5/10/2019, 7:14 am


---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/10/2019, 6:58 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

Registered: 07-2005
Location: Texas
Posts: 10247
Karma: 272 (+331/-59)
Reply | Quote
Re: Andesine Enigma graphics help please


I am thinking long term and aiming for something useable in a majority of skins and message boards which are predominately red toned in their design motif.

With this idea in mind, I changed what I believe is the bare minimum in RB Nav-bar settings. Enough change to give the skin example board some "pop" without going all out to match the skin's design exactly.

What do you think?

---

Advertise Boards On TRDConceptsDE
5/12/2019, 3:03 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

Registered: 07-2005
Location: Texas
Posts: 10247
Karma: 272 (+331/-59)
Reply | Quote
Re: Andesine Enigma graphics help please


I made seven "custom navbar sets" before I stopped myself (I was having to much fun creating these).

Runboard Navbars emoticon

---

Advertise Boards On TRDConceptsDE
5/13/2019, 3:55 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Joxcenia Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Runboard staff member

Registered: 11-2005
Location: Whoosher House
Posts: 3495
Karma: 56 (+57/-1)
Reply | Quote
Re: Andesine Enigma graphics help please


Nice.






---

Whoosh-ChelSierra-Muse-Twi-Saga
5/14/2019, 6:05 am Link to post Email Joxcenia   PM Joxcenia Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

Registered: 07-2005
Location: Texas
Posts: 10247
Karma: 272 (+331/-59)
Reply | Quote
Re: Andesine Enigma graphics help please


I miscounted! I created eight customized color navbars and also showed the minimum CSS settings for the Runboard default navbar.

---

Advertise Boards On TRDConceptsDE
5/15/2019, 1:05 am Link to post Email Pastor Rick   PM Pastor Rick Blog
 


Add a reply



You are not logged in (login)