Wolf Play : Custom Palette CSS styles
Chatbox
 Crystal Pines
01:30:40 Phoenix
Nevermind guys it just took a while to go through
 Crystal Pines
01:29:50 Phoenix
Any mods here? I just bought 20 apples and it only gave me 2
 Rogue Wildfires
01:24:40 Mac and Cheese
Sea,
Thanks!
 Sea Coast
01:23:28 
@Rogue
He is so cute!

Awwww!
 Rogue Wildfires
01:22:10 Mac and Cheese
Sea,
Aww, thanks!
 Sea Coast
01:21:47 
@Rogue

Im gonna buy a rose for him!
 SilverMountain
01:21:11 Silver, Luna or CWG
And I wonÂ’t be back for a while
 SilverMountain
01:20:51 Silver, Luna or CWG
I poofed
 Rogue Wildfires
01:20:18 Mac and Cheese
Sea,
I know! I read it and almost cried
 Sea Coast
01:19:28 
Your gonna make Me cry!
 Rogue Wildfires
01:18:51 Mac and Cheese
Dappled Leaf was a pup when he died. I misclicked when I retired him...
 Sea Coast
01:18:05 
Awww!
 Whispering Rain
01:17:56 Whisp, Rain
I about cried when I saw Cottonwood.
 Rogue Wildfires
01:16:37 Mac and Cheese
Your wolves trot along and notice an odd flickering mist. An Ancestor from your past, Dappled Leaf, appears.

Run with me! Dappled Leaf whispers.

I'm gonna cry
 aquagent
01:16:16 
Social, i think. there might be more
 Whispering Rain
01:14:20 Whisp, Rain
I can't get any dogs. What stats do my wolves need?
 Sateda
01:07:06 
Why are my wolves friendly to every dog except the German Shepherd. I can't do anything with 3 Jack Russells guys.
 Bruiser
01:05:35 oi
-WP Click-

please vote as well B)
 Bee pack
01:05:07 Belle
I see, I just realised.

How stupid of me...I haven't been online for awhile so a lot has changed too!
 MidnightXHunters
01:04:31 
Venom attacks Violet over a deer leg.

Stats: Battle +2
Affinity: Like
Mood: Fierce
Venom! Don't hurt my blue nosed baby!
Bad!

Refresh

You must be a registered member for more
than 1 day before you can use our chatbox.
Quests
Alliance Battles
Challenges
Hourly Damage Variances
Coyote : -5
Mojave Green Rattler : +1
Grizzly Bear : +4
    Summer Month: 2   Night  Weather:  Clear  Moon: 
 Explore In: Now


Forums

→ Wolf Play is a fun game! Sign Up Now!

My Subscriptions
My Bookmarks
My Topics
Latest Topics
Following
Forums > Member Help > Guides
  1  2  3  4  5 .. 38

Custom Palette CSS stylesFebruary 8, 2020 02:55 PM


Vennenum

Game Moderator
Darkseeker
 
Posts: 5611
#1822533
Give Award

11

This is not a guide on how to code CSS. The internet has plenty of CSS guides if you'd like to learn how it works.

I've added a description of the different selectors and tags listed in the default palette template. Some of this code has also been re-arranged so similar things are located next to each other. If you understand a tad bit of CSS, this should help you code some palettes.

Let me know if you'd like me to supply some of my favorite apps/websites to code. I'm happy to help!


/*--------------------------------------------------
Set overall site colors
--------------------------------------------------*/
/*Primary = Navbar & Sidebar Colors,*/
.primary {
background-color:#455b2e;
}

/*Secondary = Weather & Mushrooms Infobar Color */
.secondary {
background-color:#667f4d;
}

/*Tertiary = Denpage Buttons & Folders; Forum Trim*/
.tertiary {
background-color:#8aa275;
}

/*Forum Alternate Colors*/
.quatro {
background-color:#efecc8;
}

.forumalt {
background-color:#000000
}

/*--------------------------------------------------
For Quotes in the Forums
--------------------------------------------------*/

blockquote {
background-color:#efecc8;
border-left: 3px solid #8aa275;
}

/*--------------------------------------------------
Chat Colors
--------------------------------------------------*/

.main {
background-color:#b8cca7;
}

.sales {
background-color:#efecc8;
}

/*--------------------------------------------------
Den colors for the Wolf listing
--------------------------------------------------*/

/* Box that contains Wolf Name & Dom */
.wolfheader {
background-color:#fffbcd;
}

/* Box that includes Health/Hunger Bar */
.wolfinfo {
background-color:#beb26c;
}

/*--------------------------------------------------
Page background color
--------------------------------------------------*/

.pgbg {
background-color:#f8f5da;
}

/*--------------------------------------------------
Page Name text
--------------------------------------------------*/

/* Titles on each page including "DEN", "EXPLORE", "FORUMS" */

.headline {
color:#263408;
}

/*--------------------------------------------------
Color setting for decor/gear/food boxes
--------------------------------------------------*/
.imgcustom {
background-color:#f6edb7;
}

/*--------------------------------------------------
Set the tab color in your Den
--------------------------------------------------*/

/* Navigation Menu Color */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #8aa275;
}

/*--------------------------------------------------
Set the color and font of the menu bar text
--------------------------------------------------*/

/* Navigation Bar Text Color */
.navbar a {
font-family:arial,sans-serif;
color:#f8f5da;
}

/* Navigation DropDown Text Color */
.dropdown .dropbtn {
color:#f8f5da;
}

/* Dropdown Menu Text Color */
.dropdown-content a {
color:#000;
}

/*--------------------------------------------------
Set the tab color for the tabs under your Mailbox
--------------------------------------------------*/
/* Unselected Tabs Colors */
ul.tabbernav li a {
background: #92a882;
}

/* Container BG*/
.tabberlive .tabbertab {
background-color: #efecc8;
}

/* Unselected Tab Hover Colors */
ul.tabbernav li a:hover {
background: #efecc8;
}

/* Active Tab Color */
ul.tabbernav li.tabberactive a {
background-color: #efecc8;
}

/* Active Tab Hover Color */
ul.tabbernav li.tabberactive a:hover {
background-color: #efecc8;
}

/*--------------------------------------------------
Set the form color {includes chat textbox and mailpage textbox}
--------------------------------------------------*/

.iclass {background-color:#c8d4bd; color:#000000; -moz-border-radius: 7px;
border-radius: 7px;}


/*--------------------------------------------------
Set the color of the text in the side bar
--------------------------------------------------*/

.sidebartext { font-family:arial,sans-serif; font-size:15px; color:#dfdcbd; }

/*Links*/
.sidebartext a:link { font-family:arial,sans-serif; font-size:15px; color:#dfdcbd;}
.sidebartext a:hover { font-family:arial,sans-serif; font-size:15px; color:#bdb570;}
.sidebartext a:visited { font-family:arial,sans-serif; font-size:15px; color:#dfdcbd;}

/*--------------------------------------------------
Set the color of the text on the site
--------------------------------------------------*/

.mainlineblack{ font-family:arial,sans-serif; font-size:15px; color:#000; }

.mainlineblack a:link { font-family:arial,sans-serif; font-size:15px; color:#000;}
.mainlineblack a:hover { font-family:arial,sans-serif; font-size:15px; color:#4f2907;}
.mainlineblack a:visited { font-family:arial,sans-serif; font-size:15px; color:#000;}


/*--------------------------------------------------
Set the color of error/valid message after you submit an action
--------------------------------------------------*/

.errormsg {
background-color:#f3d1cc;
}

.validmsg {
background-color:#d7e8d2;
}

/*--------------------------------------------------

WP Buttons

--------------------------------------------------*/

.wpbutton { font-family:arial,sans-serif; font-size:15px; color:#000000; background-color:rgba(0,0,0,0); padding:0px; border:0px; border-radius:0px; border: 0px solid #000000; }
.wpbutton a:link { font-family:arial,sans-serif; font-size:15px; color:#000000; background-color:rgba(0,0,0,0); padding:0px; }

.wpbutton a:visited { font-family:arial,sans-serif; font-size:15px; color:#000000; background-color:rgba(0,0,0,0); padding:0px; }
.wpbutton a:hover { font-family:arial,sans-serif; font-size:15px; color:#000000; background-color:rgba(0,0,0,0); padding:0px; }

Edited at October 20, 2022 01:38 AM by Vennenum
Custom Palette CSS stylesMarch 19, 2020 01:58 AM


Vennenum

Game Moderator
Darkseeker
 
Posts: 5611
#1877776
Give Award

1

Additional Fun Codes:

What it does: Code:
Denpage Buttons Hover Color .tertiary button:hover {
background-color:#F4acb7;}
Change your chat text color: .smalltextblack {
color: #055474 }
Changing tree background (daytime BG) .daybody {
background: #262936;
}
Changing tree background (nighttime BG) .nightbody {
background: #2e3141;
}
Wolfplay Header Image (Spring) .mainscreen1 {
background: #000000;
}
Wolfplay Header Image (Summer) .mainscreen2 {
background: #000000;
}
Wolfplay Header Image (Fall) .mainscreen3 {
background: #000000;
}
Wolfplay Header Image (Winter) .mainscreen4 {
background: #000000;
}
Changing pack name style in chat .bsmalltext a:link {
color: # }
Changing link colors in chat .smalltextblack a:link {
color: #03384D;
Hide an element visibility:hidden;
OR
display:none;
All of these are just a fun collection of things everyone has found over the years. You can definitely do more than this, but I would only recommend using them when you've become more advanced with CSS. And by that time, you probably don't even need this guide. ;D

Edited at October 17, 2022 12:44 AM by Vennenum
Custom Palette CSS stylesMarch 19, 2020 09:12 AM


teddy

Lightbringer
 
Posts: 1632
#1878000
Give Award
Thank you! May I ask how to change the header image and the hind trees?
Custom Palette CSS stylesApril 8, 2020 08:45 PM


Pandemonium

Lightbringer
 
Posts: 429
#1924698
Give Award
Curious as to how to get the gradient in the headings as you do on your palette Venn? Also how do I change the colour of the background on the Info, About this Pack, Featured Wolf, Wolves and such?
Custom Palette CSS stylesApril 9, 2020 12:59 AM


Vennenum

Game Moderator
Darkseeker
 
Posts: 5611
#1925225
Give Award
Pandemonium said:
Curious as to how to get the gradient in the headings as you do on your palette Venn?

For gradients:

.primary {
background-color: #05668D;
background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 1));
}

For this code: rgba(0, 0, 0, 0.25)

The first three values are your color's RGB values. The fourth value is your opacity.

rgba(R, G, B, 0.25)

Pandemonium said:
How do I change the colour of the background on the Info, About this Pack, Featured Wolf, Wolves and such?

As far as I know, there's no option to do that right now. You're welcome to make the suggestion though.


Edited at April 9, 2020 01:00 AM by Vennenum
Custom Palette CSS stylesApril 9, 2020 05:35 AM


Pandemonium

Lightbringer
 
Posts: 429
#1925399
Give Award
Thanks Venn!
Custom Palette CSS stylesApril 9, 2020 03:01 PM


Dash Attacked

Lightbringer
 
Posts: 5580
#1926480
Give Award
Edit: Ignore, I figured it out :)

Edited at April 9, 2020 03:04 PM by Dash Attacked
Custom Palette CSS stylesApril 12, 2020 02:16 PM


Wilverbeast

Lightbringer
 
Posts: 5812
#1934703
Give Award
.bsmalltext {
font-family:
color: # }

Is the coding to change the text of people's nicknames/message time in chat :)

.mainline {
font-family:
color: #}
Is the coding to change the info on your den page like pack number, join date, active date, membership, etc.

Edited at April 12, 2020 02:25 PM by Wilverbeast
Custom Palette CSS stylesApril 21, 2020 05:05 PM


Ciao

Darkseeker
 
Posts: 4518
#1961486
Give Award
What would the coding be for the wording under your wolves name? (So the rank, amount of dominance, gender and age)
I cant seem to figure it out <.<

Custom Palette CSS stylesApril 21, 2020 07:55 PM


Vennenum

Game Moderator
Darkseeker
 
Posts: 5611
#1961945
Give Award
Ciao!- Try
.mainlinegr {
color: #000000;
}

Forums > Member Help > Guides
  1  2  3  4  5 .. 38

Refresh










Copyright ©2013-2024 Go Go Gatsby Designs, LLC    All Rights Reserved
Terms Of Use  |   Privacy Policy   |   DMCA   |   Contact Us