Placing static image in footer (Big Brother Theme)

  • Unknown's avatar
    abyssrocks · Member ·

    Site: http://www.searocksblog.wordpress.com
    Theme: Big Brother
    Problem: I have figured out how to get a customized footer (needed to add custom text before the wordpress branding), but I also need to include a static image, and I can not figure out how to orient it properly.

    I am using css modification below, and have a problem with the orientation of the text vs image vs wordpress branding (currently the custom text is sitting on top of the static image). Ideally I will have the text on the left going ~80% across the footer, with the static image occupying the left over space on the left. 

    .site-footer .site-info:before {
	content: "custom text is here.";
	margin-top: 15px;
	margin-bottom: 10px;
	text-align: left;
	display: block;
	font-size: 90%;
	color: #DB6551;
	font-style: normal;
		background-image: url('custom image is here');
	background-repeat: no-repeat;
	display: block;
	background-position: right;
	width: 100px;
	height: 126px;
}

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, let’s remove the width and add a right padding to make space for the image and remove the background image stuff from the :before declaration 

    .site-footer .site-info::before {
    color: #db6551;
    content: "This blog is part of the outreach activities planned under the ABYSS Initial Training Network funded by the People Programme (Marie Curie Actions) of the European Union's Seventh Framework Programme FP7/2007-2013/ under REA grant agreement n°608001. All information herein reflects only the author’s views and the European Union or the host institutions are not liable for any use that may be made of the information contained therein.";
    display: block;
    font-size: 90%;
    font-style: normal;
    height: 126px;
    margin-bottom: 10px;
    margin-top: 15px;
    text-align: left;
    padding-right: 200px;
}

    and then add the following which puts the image into the .site-footer .site-info div instead of in the “before” section. 

    .site-footer .site-info {
    background: url('https://searocksblog.files.wordpress.com/2015/07/eu2-e1437481654326.png') no-repeat scroll right top transparent;
}

    The above works down to a width of 600px before things start to get crazy. at 600px. To take care of that, we can use a Media Query to control things below 600px. Add this at the very bottom of your custom CSS and then see how everything works and let me know if there is anything else you would like to do. 

    @media screen and (max-width: 600px) {
	.site-footer .site-info {
		background: none;
	}
	.site-footer .site-info:before {
		background: url('https://searocksblog.files.wordpress.com/2015/07/eu2-e1437481654326.png') no-repeat scroll left bottom transparent;
		min-height: 260px;
		padding-right: 0;
	}
}
  • Unknown's avatar
    abyssrocks · Member ·

    Thanks so much this is hugely helpful! It has fixed everything but the large block of white space (technically blue) between the end of the additional text, and the wordpress/template branding.

    The full related CSS is below: 

    .site-footer {
	position:bottom;
	background-color: #15415a;
	width: 100%;
	padding-left: 90px;
}
.site-info {
	float: left;
	line-height: 18px;
	max-width: 100%;
}
.site-footer .site-info, .site-footer .site-info a {
	color: #c4c6c5;
	font-size: 90%;
	font-style: normal;
	margin-top: -25px;
	padding-bottom: -65px;
	width: 100%;
}
.site-footer .site-info::before {
    color: #db6551;
    content: "This blog is part of the outreach activities planned under the ABYSS Initial Training Network funded by the People Programme (Marie Curie Actions) of the European Union's Seventh Framework Programme FP7/2007-2013/ under REA grant agreement n°608001. All information herein reflects only the author’s views and the European Union or the host institutions are not liable for any use that may be made of the information contained therein.";
    display: block;
    font-size: 90%;
    font-style: normal;
    height: 126px;
    margin-top: 15px;
    text-align: left;
    padding-right: 415px;
}
.site-footer .site-info {
    background: url('https://searocksblog.files.wordpress.com/2015/07/eu5.png') no-repeat scroll transparent;
	background-size: 250px 83px;
	background-position: 91%15%
}
@media screen and (max-width: 600px) {
	.site-footer .site-info {
		background: none;
	}
	.site-footer .site-info:before {
		background: url('https://searocksblog.files.wordpress.com/2015/07/eu2-e1437481654326.png') no-repeat scroll left bottom transparent;
		min-height: 260px;
		padding-right: 0;
	}
}

    I’ve tried adding margin-bottom: -65px to the “.site-footer .site-info::before ” section which moves the wordpress/template branding up to the correct position, but in doing so it generates a blank white space which I can’t seem to get rid of. Any suggestions? Thanks!

  • Unknown's avatar
    thesacredpath · Member ·

    That space above isn’t something that we can easily get rid of. First off, if we did find a way, it would cause the opposite issue of overlap on narrower screens/windows. Using the :before or :after pseudo selectors has limitations, and also can create limitations on other things in that div, such as the existing footer credits.

  • The topic ‘Placing static image in footer (Big Brother Theme)’ is closed to new replies.