Hi, I’m have some problems adding text over an image within a text box element. Using HTML code found online seems to cause issues and during one instance deleted all page builder elements. Had to revert to a previous revision.

I added this code to a text box

<div style=”position: relative; background: url(path to image); width: (width)px; height: (height)px;”>
<div style=”position: absolute; bottom: 0; left: 0.5em; width: 400px; font-weight: bold; color: #fff;”>
<p>(text to appear at the bottom left of the image)</p>
</div>
<p style=”position: absolute; top: 1em; right: 2em; width: 120px; padding: 4px; background-color: #fff; font-weight: bold; font-size: 11px;”>
(text to appear at the top right of the image)
</p>
</div>

In doing so, the code worked (although more styling needed) but once I visit the text box again after a page save/refresh the code has vanished and the text box is in its default state. Also for whatever reason ALL page elements were shifted to the left half of page. So I just deleted the text box I created for the image/text and ALL elements on page where deleted except for the slider. Its no stress now as rolled back to a previous version. Perhaps this should be looked into.

1) Do you have a safe solution to add image and text overlay within a text box? Image to be 100% width and text to be aligned to left top.

Thanks in advance

Hi, I´m using Enfold Theme.
How can I change font size and color of title of Icon Box with css?

Thanks!

Hey,

I’m trying to add the the site title (as H1) and have it aligned with the logo.
I was able to follow some older posts to add the title and played around with the css to move the elements to the place i want them to be, but I have couple of problems:
1. When I scroll down, the header is being resized (the logo is getting smaller) and I’m not sure how to implement it to the title as well (so it will move to the center and decrease the size of the font).
2. I can’t seem to vertical align my text to the center of the header. vertical-align:middle; is not working.. :(

Here is how I added the text to the header:

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {
	$sub .= "<h1 class='logo-title'>";
	$sub .= get_bloginfo('name');
	$sub .= "</h1>";
	/*
	$sub .= "<h2 class='logo-title logo-subtitle'>";	
	$sub .= get_bloginfo('description');
	$sub .= "</h2>";
	*/
	return $sub;
}

This is what I did with the css (I set the logo to be above the menu and then I moved the logo to the other side of the screen – I need to do it for rtl and ltr languages):

.logo, .logo a {
overflow: visible;
width: 100%;
}

span.subtext {
top: 0;
right: 0px;
float:left;
}

.logo img{
float:right;
}

#top .logo-title {
transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
font-size: 32px;
color: #000;
position: relative;
left: 7px;
top: 7px;
opacity: 1;
white-space: nowrap;
}

Zohar