I would like to try and change the text on the top left part of my screen to the sites logo. I have no idea how to go about the is but I have seen it done on sites like the dark souls wiki.
My wiki: http://gyc-eldenring.wikidot.com/
Dark Souls wiki for comparison: http://darksouls.wikidot.com/
My CSS code that I am currently using:
/* Place here any CSS code that you would like to affect both the Default and Home themes */
/** Customized Standard Theme
* Based off of the Standard Theme by the Wikidot Community
* This custom color palette was created using the
* Standard Theme Colorification tool (v: 1.01.141004)
*
* Created: 22 Apr 2022
*
* Colors:
* Primary A : #333333
* Primary B : #262626
* Secondary A : #1a1a1a
* Secondary B : #1a1a1a
* Light A : #262626
* Light B : #ef8b09
* Text A : #f8a63a
* Text B : #ef8b09
* Text C : #c57307
* ***************************************************************************/
@import url('http://css.wikidot.com/theme:standard-theme/code_');
/* Primary A
==============================================================================*/
a,
.pager > .target > a,
.pager > .current,
.pager > .dots,
nav .side-bar ul li a:hover,
.hover{
color: #333333;
}
.image-box.image-box-primary .image-box-caption{ color: #333333 !important; }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.pager > .current,
.login-status .btn.dropdown-toggle,
#search-top-box form:before,
nav .top-bar .navbar-toggle,
.wiki-content-table > thead > tr > th,
.wiki-content-table > tbody > tr > th,
.wiki-content-table > tfoot > tr > th,
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
#action-area .autocomplete-list ul li:hover,
.btn.btn-primary,
.progress-bar,
.label.label-primary,
.panel.panel-primary .panel-heading,
.tabview-primary .yui-navset .yui-nav li a,
.tabview-primary .yui-navset .yui-nav li.selected a{
background-color: #333333;
}
.image-box.image-box-primary .image-box-heading{ background-color: #333333 !important; }
.image-box.image-box-primary .image-box-link:hover,
.image-box.image-box-default .image-box-link:hover{ border-color: #333333 !important; }
.pager > .current,
nav .side-bar ul li a:hover,
.panel.panel-primary,
.panel.panel-primary .panel-heading,
.hover{
border-color: #333333;
}
/* Primary B
==============================================================================*/
.pager > .current{
border-bottom-color: #262626;
}
.login-status .btn.dropdown-toggle,
#search-top-box input.text,
nav .top-bar .navbar-toggle,
.btn.btn-primary,
.tabview-primary .yui-navset .yui-nav li a,
.tabview-primary .yui-navset .yui-nav li.selected a:hover,
.tabview-primary .yui-navset .yui-nav li.selected a:focus,
.tabview-primary .yui-navset .yui-content{
border-color: #262626;
}
/* Secondary A
==============================================================================*/
a:hover,
a:focus{
color: #1a1a1a;
}
header.header-wrap,
.login-status .btn.dropdown-toggle:hover,
nav .top-bar .navbar-toggle:hover,
nav .top-bar .navbar-toggle:focus,
nav .top-bar .navbar-collapse,
.btn.btn-primary:hover,
.tabview-primary .yui-navset .yui-nav li a:hover,
.tabview-primary .yui-navset .yui-nav li a:focus{
background-color: #1a1a1a;
}
.form-control:focus,
input[type=text]:not(.form-control):focus,
textarea:not(.form-control):focus,
main .content .page-title,
.image-box.image-box-primary .image-box-link:hover{
border-color: #1a1a1a;
}
.form-control:focus,
input[type=text]:not(.form-control):focus,
textarea:not(.form-control):focus{
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset,
0 0 4px rgba(26, 26, 26, 0.25);
}
/* Secondary B
==============================================================================*/
.login-status .btn.dropdown-toggle:hover,
#search-top-box form:hover input.text,
#search-top-box input.text:focus,
nav .top-bar .navbar-toggle:hover,
nav .top-bar .navbar-toggle:focus,
.btn.btn-primary:hover,
.tabview-primary .yui-navset .yui-nav li a:hover,
.tabview-primary .yui-navset .yui-nav li a:focus{
border-color: #1a1a1a;
}
/* Light A
==============================================================================*/
body,
main .content .feature.offcolor{
background-color: #262626;
}
/* Light B
==============================================================================*/
.code.code-primary, .code-primary .code,
div.code.code-primary span.line::before,
.code-primary .code span.line::before,
.alert.alert-primary{
border-color: #ef8b09;
}
.image-box.image-box-primary{
border-color: #ef8b09 !important;
}
div.code.code-primary span.line:hover,
.code-primary .code span.line:hover{
background-color: rgba(239, 139, 9, .18);
}
/* Text A
==============================================================================*/
header.header-wrap h2,
#search-top-box form:before,
nav .top-bar .navbar-nav li a,
nav .top-bar .navbar-collapse.collapsing ul.dropdown-menu li a,
nav .top-bar .navbar-collapse.in ul.dropdown-menu li a,
main .content .feature.feature-header{
color: #f8a63a;
}
#search-top-box input.text{
background: rgba(248,166,58,0);
}
#search-top-box form:hover input.text:focus,
#search-top-box input.text:focus{
background: rgba(248,166,58,1);
}
nav .top-bar .navbar-toggle .icon-bar,
nav .top-bar .navbar-toggle .icon-bar{
background-color: #f8a63a;
}
nav .top-bar .navbar-nav > li.dropdown > a > .caret{
border-bottom-color: #f8a63a;
border-top-color: #f8a63a;
}
/* Text B
==============================================================================*/
header.header-wrap h1 a,
nav .top-bar .navbar-brand,
.wiki-content-table > thead > tr > th,
.wiki-content-table > tbody > tr > th,
.wiki-content-table > tfoot > tr > th,
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.btn.btn-primary,
.tabview-primary .yui-navset .yui-nav li a,
main .content .feature-header h1{
color: #ef8b09;
}
.image-box.image-box-primary .image-box-heading{ color: #ef8b09 !important; }
/* Text C
==============================================================================*/
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.pager > .current,
header.header-wrap h1 a:hover,
header.header-wrap h1 a:focus,
header.header-wrap h1 a:active,
nav .top-bar .navbar-nav li a:hover,
nav .top-bar .navbar-nav li a:focus,
nav .top-bar .navbar-brand:hover,
nav .top-bar .navbar-brand:focus,
nav .top-bar .navbar-nav > .open > a,
nav .top-bar .navbar-nav > .open > a:hover,
nav .top-bar .navbar-nav > .open > a:focus,
nav .top-bar .navbar-collapse.collapsing ul.dropdown-menu li a:hover,
nav .top-bar .navbar-collapse.in ul.dropdown-menu li a:hover,
nav .top-bar .navbar-collapse.collapsing ul.dropdown-menu li a:focus,
nav .top-bar .navbar-collapse.in ul.dropdown-menu li a:focus,
.btn.btn-primary:hover{
color: #c57307;
}
nav .top-bar .navbar-toggle .icon-bar,
nav .top-bar .navbar-toggle .icon-bar{
background-color: #c57307;
}
nav .top-bar .navbar-nav li.dropdown a:hover > .caret,
nav .top-bar .navbar-nav li.dropdown a:focus > .caret{
border-bottom-color: #c57307;
border-top-color: #c57307;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
padding: 20px;
text-align: center;
}