Difference between revisions of "User:Sparklyflowers/CSS"

(nowiki tags)
Line 6: Line 6:
 
}
 
}
 
#header{
 
#header{
background-image: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvMy9hLzJlM2FjZTI2ODE0NzI5NTA0ZWExMGFkN2JjM2ZmYmVjMWJiZDg3LmpwZw==&rn=bGVtb25zLmpwZw==);
+
background-image: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvZC81L2VjMmYwMjM0OWJmYTk3ZDU2ZTIxNjVjY2RmMjk2Nzk2YTI2NTM5LmpwZw==&rn=cGluay5qcGc=);
}
+
height:200px;
#header h1{
 
font-size: 40px
 
}
 
#header h1:hover{
 
font-size: 60px
 
 
}
 
}
 
div .message{
 
div .message{
Line 33: Line 28:
 
div:hover{
 
div:hover{
 
cursor: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvZC9lL2YyYTdmNWYwYzE4MWE1YTNhMzIzN2EyZjQ4MjVhMTM3MjhkMmEyLnBuZw==&rn=c21hbGwgZmxvd2VyLnBuZw==) 4 12, auto;
 
cursor: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvZC9lL2YyYTdmNWYwYzE4MWE1YTNhMzIzN2EyZjQ4MjVhMTM3MjhkMmEyLnBuZw==&rn=c21hbGwgZmxvd2VyLnBuZw==) 4 12, auto;
}
 
div#header {
 
    background-image: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvZC81L2VjMmYwMjM0OWJmYTk3ZDU2ZTIxNjVjY2RmMjk2Nzk2YTI2NTM5LmpwZw==&rn=cGluay5qcGc=);
 
 
}
 
}
 
#header h1{
 
#header h1{
 +
position: absolute;
 +
bottom: 0;
 +
width: 100%;
 
text-align:center;
 
text-align:center;
 
font-family:Ink Free;
 
font-family:Ink Free;
 
font-size:40px;
 
font-size:40px;
height:150px;
 
 
transition:0.5s;
 
transition:0.5s;
 
}
 
}
Line 56: Line 50:
 
}
 
}
 
h1{
 
h1{
     color: white;
+
     color: purple;
 
     font-family: Ink Free;
 
     font-family: Ink Free;
 
     font-weight: bold;
 
     font-weight: bold;
Line 67: Line 61:
 
font-family: Ink Free;
 
font-family: Ink Free;
 
}
 
}
<nowiki>
+
 
 +
#navigation_box{
 +
background-color: lavender;
 +
padding:10px!important;
 +
position:fixed;
 +
border-bottom:none;
 +
height:48px;
 +
z-index:!important;
 +
}
 +
#navigation_box a{
 +
padding:4px!important;
 +
font-family:Ink Free;
 +
font-size:16px;
 +
color: #000;
 +
border-bottom: solid 3px purple;
 +
transition:.2s;
 +
}
 +
#navigation_box a:hover{
 +
padding-bottom:7px!important;
 +
}
 +
#left_navigation_box{
 +
color:#000;
 +
}
 +
#left_navigation_box a:nth-child(2){
 +
margin-left:-8px;
 +
}
 +
#left_navigation_box a:nth-child(3){
 +
margin-left:-9px;
 +
}
 +
#left_navigation_box a:nth-child(4){
 +
margin-left:-9px;
 +
}
 +
#right_navigation_box{
 +
color:#fff;
 +
}
 +
#right_navigation_box a:nth-child(1){
 +
margin-right:-5px;
 +
}
 +
#right_navigation_box a:nth-child(2){
 +
margin-right:-6px;
 +
}
 +
 
 +
a.blog-post-comment{
 +
font-family:Ink Free;
 +
font-size: 28px;
 +
color: purple;
 +
}
 +
div.efooter{
 +
font-family:Ink Free;
 +
font-size: 20px;
 +
}
 +
</nowiki>

Revision as of 19:45, 16 July 2020

/** Credits to SirCalcsALot and BM for part of the CSS **/ /** This sets the background color of your blog posts. Try changing the color and see what happens! **/ div .entrywrap, div .entrywrap-hover { background-color : #ccf6ff; border: 5px solid pink } #header{ background-image: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvZC81L2VjMmYwMjM0OWJmYTk3ZDU2ZTIxNjVjY2RmMjk2Nzk2YTI2NTM5LmpwZw==&rn=cGluay5qcGc=); height:200px; } div .message{ font-family: Ink Free; } title { color: lavender; } html{ background: url("https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvYy8xL2U3ZjgyMjc1NzBhNTY2ZTNjYWVjOTQ4NDJlYWRiYWVlNThlMDRiLmpwZw==&rn=bGF2ZW5kZXIuanBn"); background-position: center; background-size: cover; background-attachment:fixed;} *{ cursor: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvZC9lL2YyYTdmNWYwYzE4MWE1YTNhMzIzN2EyZjQ4MjVhMTM3MjhkMmEyLnBuZw==&rn=c21hbGwgZmxvd2VyLnBuZw==) 4 12, auto; } a{ cursor: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvZC9lL2YyYTdmNWYwYzE4MWE1YTNhMzIzN2EyZjQ4MjVhMTM3MjhkMmEyLnBuZw==&rn=c21hbGwgZmxvd2VyLnBuZw==) 4 12, auto; } div:hover{ cursor: url(https://services.artofproblemsolving.com/download.php?id=YXR0YWNobWVudHMvZC9lL2YyYTdmNWYwYzE4MWE1YTNhMzIzN2EyZjQ4MjVhMTM3MjhkMmEyLnBuZw==&rn=c21hbGwgZmxvd2VyLnBuZw==) 4 12, auto; } #header h1{ position: absolute; bottom: 0; width: 100%; text-align:center; font-family:Ink Free; font-size:40px; transition:0.5s; } #header h1:hover{ font-size: 60px; } div#wrapper{ width: 65%; height: inherit; } div#main { width: 70%; } h1{ color: purple; font-family: Ink Free; font-weight: bold; } h2, h3, h4, h5, h6, #navigation_box{ font-family: Ink Free; font-weight: bold; } #side{ font-family: Ink Free; } #navigation_box{ background-color: lavender; padding:10px!important; position:fixed; border-bottom:none; height:48px; z-index:!important; } #navigation_box a{ padding:4px!important; font-family:Ink Free; font-size:16px; color: #000; border-bottom: solid 3px purple; transition:.2s; } #navigation_box a:hover{ padding-bottom:7px!important; } #left_navigation_box{ color:#000; } #left_navigation_box a:nth-child(2){ margin-left:-8px; } #left_navigation_box a:nth-child(3){ margin-left:-9px; } #left_navigation_box a:nth-child(4){ margin-left:-9px; } #right_navigation_box{ color:#fff; } #right_navigation_box a:nth-child(1){ margin-right:-5px; } #right_navigation_box a:nth-child(2){ margin-right:-6px; } a.blog-post-comment{ font-family:Ink Free; font-size: 28px; color: purple; } div.efooter{ font-family:Ink Free; font-size: 20px; }