Chatbox
 FIAB
09:41:00 
I was kind of excited to see what it looks like
 FIAB
09:40:21 
Mine hasn't changed yet for some reason.
 The Tea Drinkers
09:39:15 Tea, Tea Queen
Its hilarious how upset we all are over this we're like old people trying to switch from corded phones to mobile >.>
 FIAB
09:38:55 
I use a web browser on mobile that has a UA customizable slot so I don't have to view it as a computer or a web page I can view it as a pop-up window
 Destinations End
09:37:05 Toliska, Desti, Coy
The only thing that I will take some getting used to is not being able to browse the site and chat in the same tab.
When I open chat in the updated tabs it takes up the entire
phone screen so I can't see anything but the chat. I am unsure if this is what it's supposed to do or if it could be a bug though..
 Existence
09:36:52 Exist / Kuskyn
One of the title buttons done even line up on mobile either x.x
 Existence
09:32:24 Exist / Kuskyn
Tea, yeah it suchs because I prefer the old set up ;-;
 The Tea Drinkers
09:29:27 Tea, Tea Queen
Exist
ah rats ;.; I suppose its not worth me looking for it then XD
 Serpents
09:29:05 Waterfall,Zane,Pixal
-WP Click- vote comment
 Luna❄
09:26:10 Silver (She/her)
Your wolves played: Aila accidentally knocks over a pup with its tail.

Aila whyyy- wait I don't have any pups where are you finding a nonexistent pup?!?
 Existence
09:25:35 Exist / Kuskyn
Tea, The toggle to say it's on desktop doesn't work ;-;
 The Tea Drinkers
09:21:43 Tea, Tea Queen
Exist
is there a way to toggle it to say that you're on desktop? To keep it the same? Or is the whole website changing?
 Winter Haven
09:19:23 winter
like in terms of web dev i guess i get that it's easier to just change the base website so that it's functional for all screen sizes but like i feel like it'd be better ux/ui in the long run to have a toggle for mobile vs desktop view...
 Existence
09:16:43 Exist / Kuskyn
Tea, I wish having the desktop site selected would fit it because I don't have a laptop at the moment and I prefer mobile here and there outside doing explore;-;
 Luna❄
09:16:20 Silver (She/her)
I haven't been on WP on my phone yet since the mobile update, but I feel like it is going to be such a jumpscare
 The Tea Drinkers
09:14:35 Tea, Tea Queen
Exist
I went on WP on mobil and legitimately thought the game was bugging cause all the stuff on the top bar was smooshed into one side lol
 Luna❄
09:14:14 Silver (She/her)
if I was premium I would use this flash bang palette -Click- (I don't know what happened to the names in the chat...)
 Existence
09:13:43 Exist / Kuskyn
Tea, I feel the same way honestly;-;
 Magnus Bane
09:13:25 Mag/Maggy
It's new but I don't hate it. Only thing I dokt care for is chat having its own separate page
 The Tea Drinkers
09:12:45 Tea, Tea Queen
Everything feels oddly cramped on the new pages >.> it's gonna take some getting used to

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
Snapping Turtle : 0
Jackal : -3
Red Fox : -4
    Spring   Night   Clear  Moon: 
 


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

   Custom Palette CSS stylesFebruary 8, 2020 02:55 PM


Vennenum

Game Moderator
Darkseeker
 
Posts: 5744
#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: 5744
#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 .mainscreen5 {
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 September 8, 2024 07:19 PM by Vennenum
Custom Palette CSS stylesMarch 19, 2020 09:12 AM


teddy

Lightbringer
 
Posts: 1690
#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

Darkseeker
 
Posts: 434
#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: 5744
#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

Darkseeker
 
Posts: 434
#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


Winterbeast

Lightbringer
 
Posts: 5958
#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: 4519
#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: 5744
#1961945
Give Award
Ciao!- Try
.mainlinegr {
color: #000000;
}

Forums > Member Help > Guides
   1    2    3    4   ..   40 

Refresh










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