Button Code Help

Help for the old style boards.

Moderators: not2foxie, bwayne, spherical

CathyAnn
Joined: 27 Jul 2015, 04:41

06 Aug 2016, 04:28 #1

http://gram2gab.yuku.com/


I made the buttons for this skin because that was how it was originally done.

Is there a code to put in for oval buttons where we can change the background color, text color and boarder color?
And be able to color all buttons and the like.

Thank you
CathyAnn



Reply

Arizona
Joined: 31 Jan 2013, 23:01

06 Aug 2016, 05:22 #2

Sure :). In my older skins (like that one) I didn't make css buttons as we had the image spaces. But now I generally make a css button too... that way if the images are "off" for any reason you could see those.

Give me the color you want for one skin and the style... just link me to a pick of a skin that has one you like and I will match it for you. Then you can just change the colors for other skins. :)
🇩🇪🇩🇪⚽🏆🇩🇪🇩🇪
Reply

Arizona
Joined: 31 Jan 2013, 23:01

06 Aug 2016, 05:24 #3

Also.. I can give you some code for your main header if you like. What I mean is... currently depending on the screen size of each user, that large banner image can stretch the content area so that it overlaps the other borders. I can give you some code that will make that image scale down relative to the screen size. Just let me know if you want that.
🇩🇪🇩🇪⚽🏆🇩🇪🇩🇪
Reply

CathyAnn
Joined: 27 Jul 2015, 04:41

06 Aug 2016, 08:35 #4

http://cathyannsskins.yuku.com/forums/1 ... 6WfWo-cGM8


This is the new RD style, but I like how you can use a tile as a background for the button, and change the boarder as well as text

Yes Please on the issue you talked about concerning the Head Tag.

Here is the button Images. Color is #f5dae3. boarder #6a283d Url (here if I want) instead of color and text #000. These are the colors in the skin I am revamping.
Image


I hope you can help.


Thank you for your time honey.

As usual, you are my most awesome surporter.

Also, in the code section you can see where you put you designed the skin in 2008. I added that I edited it in 2016 and that will remain so there is never any question about the skin.ImageImage

CathyAnn
Last edited by CathyAnn on 06 Aug 2016, 08:39, edited 1 time in total.



Reply

Arizona
Joined: 31 Jan 2013, 23:01

06 Aug 2016, 11:16 #5

Ok on the skin you are working on you have this already:

Code: Select all

input.button {
   color: #000;
   border: 2px solid;
   border-color: #6a283d;
   background: #f5dae3;
}
Just change it to this and it will include all your buttons:

Code: Select all

p.button,.button, a.button,
input.button {
   color: #000;
   border: 2px solid;
   border-color: #6a283d;
   background: #f5dae3;
text-decoration: none; }
buuuuuuuuuuuuuut.... the input button has padding already and the others do not.. try adding this also:

Code: Select all

padding: 2px 5px;
This will resize your header image on smaller screens:

Code: Select all

div.mycontent > center > img { width: auto; max-width: 100%; }
Also change this:

Code: Select all

.mycontent { width: 90%; margin: 10px auto; }
to this:

Code: Select all

.mycontent { padding: 20px;  }
Because giving that inner division (mycontent) a width and the auto is making it overlap the other borders. You don't need that, only on the very first border or layer.

And one other thing. Any skin you find in our library or that I have made... you can change as you like you do not need to give credit for the skin code. The code is not "mine". It is just the way I arranged it for that page. The only thing I ask that is given "credit wise" is if you see a link at the bottom of a library skin and it says... made with images or graphics from..so and so. That artist should be credited.  But if you are replacing the images anyway then you don't need to do that either.  :).
🇩🇪🇩🇪⚽🏆🇩🇪🇩🇪
Reply

CathyAnn
Joined: 27 Jul 2015, 04:41

06 Aug 2016, 20:37 #6

Thank you honey,
I will be working on this off and on for days.




I had 37 messages I am working thru in my group about my skins lol.

All is good.

Hugs CathyAnn



Reply

CathyAnn
Joined: 27 Jul 2015, 04:41

06 Aug 2016, 21:10 #7

fixed this question so I deleted it lol
Last edited by CathyAnn on 08 Aug 2016, 04:51, edited 1 time in total.



Reply

CathyAnn
Joined: 27 Jul 2015, 04:41

06 Aug 2016, 21:56 #8

Changed this info, to below
Last edited by CathyAnn on 08 Aug 2016, 04:52, edited 1 time in total.



Reply

CathyAnn
Joined: 27 Jul 2015, 04:41

08 Aug 2016, 03:56 #9

Ok, I found an example of button codes and swapped what was there with that one.
I can now put a tile to match the outside boarder.

The part about the head tag I can't comprehend that though.
I don't know where that goes or how to add it.

CathyAnn



Reply

CathyAnn
Joined: 27 Jul 2015, 04:41

08 Aug 2016, 04:34 #10

This will resize your header image on smaller screens:div.mycontent > center > img { width: auto; max-width: 100%; } Also change this:.mycontent { width: 90%; margin: 10px auto; } to this:.mycontent { padding: 20px; }I put these in but not sure if they are in the right spot.I just added the my content 20px one and now the chat box is a mess. The messages don't go to the top.ImageThe skin is here: http://friendshipcirclemanagergroup.yuku.com/CathyAnn
Last edited by CathyAnn on 08 Aug 2016, 05:11, edited 2 times in total.



Reply