Single post in Whatcar?

Forum Index > PokéFarm > Journals > Whatcar? >

Nanicar

👍 14

Posted 23/Jul/2018 01:10:33 (5 years ago)
Edited 24/Jul/2018 19:11:18 (5 years ago)

Tab 1
Tab 2
Tab 3

Poké ipsum Boldore Baflammet.

Check tab three.

If you're here, you might be hoping to see more. Check here for an actual filled-out template.

This is my very first free-to-use About Me template and, I gotta say... I'm very proud of it. So much so, that I'm confident that others would like to use it too. ~~Please don't prove me wrong.~~ A bit of information first. The code below provides the code with nothing really preset. All colors and text must be set by you. After all, what fun is it if everyone uses the default color palette? Anyway, this works best by saving it as a template and then using the "Insert..." button. After that, you can of course delete the template. Or not make one in the first place and just rummage through the code, if that's more your style. That said, under the code you'll find links to the code for preset color palettes. Feel free to use those if you're unexperienced, or just if you're lazy. Lazy works too. More palettes will likely be added later. Furthermore, you can customize the credits so long as you don't remove anything that's already there. I think that's it. Oh yeah! If you use my template, feel free to tell me! I'd be interested to see it.

code

[sc=wrapper][

][sc=header][sc=name]<username>[/sc][/sc][

][sc=profile][/sc][

][sc=tabbed_interface horizontal][

    ][ul][
        ][li]<tab 1 title>[/li][
        ][li]<tab 2 title>[/li][
        ][li]<tab 3 title>[/li][
    ][/ul][

    ][sc=content]<tab 1 content>[/sc][
    ][sc=content]<tab 2 content>[/sc][
    ][sc=content]<tab 3 content>[/sc][

][/sc][

][sc=credits][pit="©"][display=Credits]About Me template by [url=/user/Duckbug]Duckbug[/url].[br]Code can be found [url=/forum/post/3833029]here[/url].[br][br]<credits>[/display][/pit][sc=mask][/sc][/sc][

][/sc]

[style]

@import "skins/user/z/f/roboto/__extra";

.wrapper {

@col-custom-bg1: <global background color>;
@col-custom-bg2: <title background color>;
@col-custom-bg3: <content background color>;
@col-custom-fg1: <main text color>;
@col-custom-fg2: <title text color>;
@col-custom-border1: <global border color>;
@col-custom-border2: <title border color>;
@col-custom-border3: <content border color>;
@col-custom-link1: <primary link color>;
@col-custom-link2: <visited link color>;
@col-custom-link3: <active link color>;

@col-bg-header: <header background color>;
@img-bg-header: url('<header image url>');
@col-border-header: <header border color>;
@col-fg-name: <username color>;

@col-bg-profile: <profile picture background color>;
@img-bg-profile: url('<profile picture url>');

// If you'd like, you can set custom CSS for the tab content background.
@col-bg-content: @col-custom-bg3;
@img-bg-content: none;
@col-fg-content: @col-custom-fg1;

/*  color-reset.min.less
      - Applies the above custom colors to recurring elements much like
        a custom skin.
      - Removing this or changing it is not suggested.
*/
.bbcode_table{border:3px outset @col-custom-border1;}.bbcode_table td,.bbcode_table th{border:1px solid @col-custom-border1;}.bbcode_table th{background-color:@col-custom-bg3;}.bbcode_tooltip{border-bottom-color:@col-custom-border1;}.panel{background-color:@col-custom-bg3;}.expbar{border-color:@col-custom-border3;background:@col-custom-bg3;color:@col-custom-fg1;}.expbar>div{border-right-color:@col-custom-border1;background-color:@col-custom-bg1;}.tooltip_content{border-color:@col-custom-border1;background-color:@col-custom-bg1;color:@col-custom-fg1;}.panel{border-color:@col-custom-border3;background-color:@col-custom-bg3;box-shadow:0 0 8px @col-custom-border3;}.panel>h3{background-color:@col-custom-bg2;border-bottom-color:@col-custom-border2;color:@col-custom-fg2;}.panel>div{color:@col-custom-fg1;}.panel.accordion>h3>a{color:@col-custom-fg2;}.tabbed_interface>ul>li{border-left-color:@col-custom-border1;border-bottom-color:@col-custom-border2;border-right-color:@col-custom-border2;background-color:@col-custom-bg2;color:@col-custom-fg2;}.tabbed_interface>ul>li:first-child{border-top-color:@col-custom-border1;}.tabbed_interface>ul>li:last-child{border-bottom-color:@col-custom-border1;}.tabbed_interface>ul>li.tab-active{border-right-color:@col-custom-bg3;background-color:@col-custom-bg3;color:@col-custom-fg1;}.tabbed_interface>div{background-color:@col-custom-bg3;color:@col-custom-fg1;border:1px solid @col-custom-border3;box-shadow:0 0 8px @col-custom-border3;}.tabbed_interface.horizontal>ul{background-color:@col-custom-bg2;}.tabbed_interface.horizontal>ul>li{border-top:1px solid @col-custom-border2;}.tabbed_interface.horizontal>ul>li.tab-active{border-right-color:@col-custom-border1;border-bottom-color:@col-custom-bg3;}a:link{color:@col-custom-link1}a:visited{color:@col-custom-link3}a:active{color:@col-custom-link2}

border-radius: 10px;
font-family: 'Roboto', 'Meiryo', 'Verdana', sans-serif;
overflow: hidden;
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
margin: 1em 5px;
position: relative;
font-size: 11pt;
background-color: @col-custom-bg3;

.header {
    background-color: @col-bg-header;
    background-image: @img-bg-header;
    background-size: cover;
    height: 100px;
    border-bottom: 40px solid @col-border-header;
    position: relative;
    image-rendering: auto;
    .name {
        font-size: 20px;
        line-height: 20px;
        bottom: -30px;
        left: 12px;
        position: absolute;
        color: @col-fg-name;
        font-weight: bold;
    }
}

.profile {
    background-color: @col-bg-profile;
    background-image: @img-bg-profile;
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    border: 5px solid @col-border-header;
    position: absolute;
    top: 30px;
    right: 8px;
    image-rendering: auto;
    overflow: hidden;
}

& > .tabbed_interface.horizontal {
    & > ul {
        & > li {
            border: none;
            padding: 4px 8px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            width: 1%;
            color: fade(@col-custom-fg2, 57%);
            &.tab-active {
                background-color: @col-custom-bg3;
                color: @col-custom-fg1;
            }
        }
    }
    & > div {
        background-color: @col-bg-content;
        background-image: @img-bg-content;
        color: @col-fg-content;
        box-shadow: none !important;
        padding: 24px 12px 0;
        overflow: visible !important;
        font-size: 15px;
        border: none;
    }
}

.credits {
    display: block;
    color: @col-custom-fg1;
    text-align: right;
    font-size: 14px;
    line-height: 12px;
    //padding: 0 12px 10px;
    position: static !important;
    
    span {
        @a: 24px;
        border: none;
        box-sizing: border-box;
        width: @a;
        height: @a;
        display: inline-block;
        text-align: center;
        line-height: @a;
    }
    
    .tooltip_content {
        padding: 0;
        background: 0;
        border: 0;
        border-radius: 0;
        display: none;
        animation: none;
    }
    
    .bbcode_tooltip.lock + .tooltip_content {
        display: block;
        top: 50%;
        left: 0;
        height: 0;
        overflow: visible !important;
        .panel {
            display: inline-block;
            width: 290px;
            box-sizing: border-box;
            vertical-align: middle;
            box-shadow: 0 0 8px @col-custom-border3, 0 0 0 8675309px fade(@col-custom-bg1, 75%) !important;
            margin: 0 5px;
            transform: translateY(-50%);
            font-size: 80%;
            & > div {
                line-height: 1.25em;
            }
        }
    }
    
    
    .bbcode_tooltip.lock ~ .mask {
        display: block;
        height: 99999px;
        width: 099999px;
        position: absolute;
        left: -99999px / 2;
        top: -099999px / 2;
    }
}

}

[/style]

Preset Palettes

Default

PFQ

Valentine's 2017

Avatar portrait created with the Stardew Valley character creator.

Loading...

Single post in Whatcar?

Credits

code

Preset Palettes