Create html code Logo (not txt and not image)

  • Hey all

    I have tried to add html code to the logo form field. The code displays directly on-screen. I can add plain txt and also logo image, but i want html and styled in CSS.

    My CSS code works fine in pages. It is added in Additional CSS.

    My HTML code also works fine when created in a code editor in HTML

    CSS:

    @font-face {
    font-family: "Strokey Bacon";  
    src: url(https://www.mysite.com/public_html/wp-content/themes/mytheme/fonts/strokey-bacon.ttf);
}

.box-set {
  background: none;
  height: 160px;
  position: relative;
}
.box {
  background: none;
  border: 0px solid #ff7b29;
  position: absolute;
}
.box-1 {
	font-family: "Special Elite",   	"1913 Typewriter", "AA Typewriter";
	font-size: 30px;
	font-variant: small-caps;
	color: #194d19;
  left: 0px;
  top: 0px;
  z-index: 3;
}
.box-2 {
	font-family: "Special Elite",   	"1913 Typewriter", "AA Typewriter";
	font-size: 30px;
	font-variant: small-caps;
  color: #194d19;
  top: 19px;
  left: 0px;
  z-index: 2;
}
.box-3 {
	font-family: "Special Elite",   	"1913 Typewriter", "AA Typewriter";
	font-size: 50px;
  color: #194d19;
  left: 32px;
  top: -24px;
  z-index: 1;
}
.box-4 {
	font-family: "Strokey Bacon", "Stalinist One", "PT Mono";
  font-size: 50px;
	font-variant: small-caps;
	font-weight: bold;
	text-shadow: 3px 2px #404040;
	color: #ffffff;
	top: -12px;
  left: 38px;
  z-index: 0;
}

    and HTML for the logo field:

    <div class="box-set">
<figure class="box box-1">Ea</figure>
<figure class="box box-2">We</figure>
<figure class="box box-3">ST</figure>
<figure class="box box-4">Army</figure>
</div>

    Can I do this? and how?

    Thx ??

    • This topic was modified 6 years, 2 months ago by hebhansen.
Viewing 1 replies (of 1 total)

  • Are you trying to code it as an addition to the core custom-logo?
    Or are you just trying to get it work on your site?

    Assuming it’s just for your site, you can put it in a Custom HTML widget and put that in a widget area. (I think themes should have widget areas everywhere the user wants to add things, but a lot don’t.) If there’s no widget area where you want it, make a child theme and either add a widget area or put your HTML into the template file.

Viewing 1 replies (of 1 total)
  • The topic ‘Create html code Logo (not txt and not image)’ is closed to new replies.