Is there a way to resize and item in a progress bar?
2/10 GemsA Somewhat Extensive Guide to BBCodes
Forum Index > PokéFarm > Guides >
QUOTE originally posted by cloud1288835
2/10 GemsNaive/Row • He/Him • i liek rowlet
Shop • goofy journal • rowlet
0
rowlet is life
without rowlet i die
0
rowlet is life
without rowlet i die
QUOTE originally posted by cloud1288835
Is there a way to resize and item in a progress bar?
2/10 Gems
how do i make an image change to another image once someone hovers over it?
credit
shown in "About Me"
QUOTE originally posted by HélènOfTroy
how do i make an image change to another image once someone hovers over it?
QUOTE originally posted by YourNaiveFriend
QUOTE originally posted by HélènOfTroy
how do i make an image change to another image once someone hovers over it?
Maybe something like this? (Hover/tap to evolve Puppod heh)
Note how the size changes... it will be best if the image sizes match, or at least are close, you don't want it moving the page around a bunch on hover.
I thought about doing it with background images instead, which made sizing/positioning easier, but caused lag on hover while the second image loads... this method causes most browsers to load the hover image with the unhovered image so there's no lag.
Code
[sc=hover-img][img]https://pokefarm.wiki/images/c/c8/Puppod.png[/img][img]https://pokefarm.wiki/images/b/b2/Slugdog.png[/img][/sc]
[style]
.hover-img {
display: inline-block;
img:nth-of-type(2) {
display: none;
}
&:hover {
img:nth-of-type(1) {
display: none;
}
img:nth-of-type(2) {
display: inline;
}
}
}
[/style]
You can set the image's width and height then make it so any excess will be cut off instead of pushing everything under it.
For example I set the image's area too small but instead of shifting everything down it will just cut it off instead.
QUOTE
[style]
.hover-img {
display: inline-block;
width:75px; //set how much space the image is allowed to use
height:20px; //
overflow: hidden; // keeps it from flowing out of its area
img:nth-of-type(2) {
display: none;
}
&:hover {
img:nth-of-type(1) {
display: none;
}
img:nth-of-type(2) {
display: inline;
}
}
}
[/style]
Noob here -
Tried my best to look this up or mess with things but maybe I'm just missing it.
Trying to edit my about me menu and having issues with a few things
~issues~
Trying to change the about-me code to roughly match my site skin for those using default/other site skins. Left is with skin, Right is default
Also, using this free code
I made some good progress but can't work out the:
* Hover Button Backgrounds (closed)
* Hover Backgrounds (open)
* Menu Tab backgrounds ("Interacting, Specials" etc)
* Background-area behind the avatar icon?
I have made a fresh copy of the style section for that about template.
You will need to add the "background-color" tag to set the color for questions 1, 2, and 4.
Let me know if i misunderstood what parts you were talking about.
- Sets the color for closed tabs.
- Sets the color for the currently open tab, if not set it will use the closed tab color.
- Change color behind the tab buttons.
- add "background-color" tag and set it to what ever color you want.
Code Snip, Style Section
[style]
.sceptios-about-me {
width: 100%;
overflow: hidden;
}
.avatar {
display: inline-block;
overflow: hidden;
float: left;
height: 72px;
width: 72px;
border-style: solid;
border-color: @col-border2;
border-width: 3px;
margin-right: 4px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: green; // #4
&>img {
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
filter: brightness(90%);
}
}
.tabbed_interface {
&>ul, {
background-color: yellow; // #3
&>li {
display: block;
padding: 8px;
margin: 1px;
border-width: 2px;
border-style: solid;
font-size: 10pt;
font-weight: bold;
text-align: center;
cursor: pointer;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
line-height: 4px;
height: 4px;
width: 60px;
border-color: @col-border2;
background-color: green; // #1
&.tab-active {
filter: brightness(85%);
border-bottom-color: @col-border2;
background-color: red; // #2
}
&:not(.tab-active):hover {
color: @col-fg1;
background-color: @col-bg1;
}
}
}
&>.tab {
box-shadow: none;
background-color: inherit;
margin: 4px 0px;
padding: 8px 4px;
border-color: @col-bg2;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border-width: 3px 1px;
border-style: solid dotted;
}
}
.credits {
background-color: @col-bg3;
font-size: 10pt;
float: right;
text-align: right;
padding: 1px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
vertical-align: middle;
}
:after {
height: 0;
}
[/style]
QUOTE originally posted by StormsTime
I have made a fresh copy of the style section for that about template.
You will need to add the "background-color" tag to set the color for questions 1, 2, and 4.
Let me know if i misunderstood what parts you were talking about.
- Sets the color for closed tabs.
- Sets the color for the currently open tab, if not set it will use the closed tab color.
- Change color behind the tab buttons.
- add "background-color" tag and set it to what ever color you want.
Code Snip, Style Section
[style]
.sceptios-about-me {
width: 100%;
overflow: hidden;
}
.avatar {
display: inline-block;
overflow: hidden;
float: left;
height: 72px;
width: 72px;
border-style: solid;
border-color: @col-border2;
border-width: 3px;
margin-right: 4px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: green; // #4
&>img {
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
filter: brightness(90%);
}
}
.tabbed_interface {
&>ul, {
background-color: yellow; // #3
&>li {
display: block;
padding: 8px;
margin: 1px;
border-width: 2px;
border-style: solid;
font-size: 10pt;
font-weight: bold;
text-align: center;
cursor: pointer;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
line-height: 4px;
height: 4px;
width: 60px;
border-color: @col-border2;
background-color: green; // #1
&.tab-active {
filter: brightness(85%);
border-bottom-color: @col-border2;
background-color: red; // #2
}
&:not(.tab-active):hover {
color: @col-fg1;
background-color: @col-bg1;
}
}
}
&>.tab {
box-shadow: none;
background-color: inherit;
margin: 4px 0px;
padding: 8px 4px;
border-color: @col-bg2;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border-width: 3px 1px;
border-style: solid dotted;
}
}
.credits {
background-color: @col-bg3;
font-size: 10pt;
float: right;
text-align: right;
padding: 1px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
vertical-align: middle;
}
:after {
height: 0;
}
[/style]
beep
I was able to set tab-background colors and the avatar-background color
Not entirely sure how to:
1. Change text color on Tabs+Hides (getting errors, maybe im formatting badly)
2. Where exactly I'd use the background code for the Hides backgrounds (probably same issue as above)
Cannot post: Please log in to post