Showing front page image without post


#1

DamnTattoo.com

I absolutely love this theme, thank you so much! OK, what I would like to do, as you can see on my site the top image where the slider is I would like it to be a static image and not necessarily clickable or a slider image to a ghost post or something. For some reason I thought there was a setting to choose which categories can be shown on the main page which would simplify everything, but I can’t find it.

Any help is appreciated.

-J


#2

To be honest, I don’t really understand what you’re asking :slight_smile:

You want to replace the slider with a simple image that doesn’t link anywhere?

But what do categories have to do with it? I’m guessing you don’t mean categories for the slider, since you probably saw that option when you activated the slider.


#3

OK, sorry, I am still working on my first cup of coffee.

so when you go to my site and you see the slider image, it is clickable. for all purposes I want an image in that location ( I don’t care how either slider, post, anything) that is not clickable.

if you read what the image says it really is more of a place setting image than a post, slider, etc.


#4

BTW, pretty quick response - thanks


#5

I see. This would require that you dive into the code a bit. For this customization, you could either modify the original template files (but you would have to remember to make this modification every time you update the theme) or you can create a child theme and never worry about updates. Your choice.

  • disable the slider since you don’t seem to need it;
  • go to the index.php file and find this line: <?php if ( have_posts() ) : ?>
  • right above that line paste this code (I used the image you have now, simply change the src to whatever image you want):

<div class="welcome-image">
     <img src="http://DamnTattoo.com/wp-content/uploads/2014/07/Damn- Tattoo-Free-tattoo-700x500.png" alt="Damn Tattoo">
</div>

  • go to the style.css file and add this:

.welcome-image {
    margin-bottom: 30px;
}

I didn’t test this, but it should work. Let me know how it goes.


#6

That works PERFECT!

Now, let me complicate things more. What if I wanted a border around it not unlike the border of images of the slider and is it possible to have the action also when cursor hovers over image?

Even if the answer is no, that was really big giving me the code. THANKS!!!


#7

This would add the same border as the slider has, but it won’t be very visible next to the color of your image. You can change the 1px part to be thicker and you can also change the #e0e0e0 color to whatever you need. It will also add the hover effect Add it to your style.css:


.welcome-image {
    border: 1px solid #E0E0E0;
    overflow: hidden;
}
.welcome-image img {
   -webkit-transition: all 0.4s;
   transition: all 0.4s;
}
.welcome-image img:hover {
   -webkit-transform: scale(1.2) rotate(3deg);
   transform:  scale(1.2) rotate(3deg);
  -ms-transform:  scale(1.2) rotate(3deg);
}

I also noticed that you didn’t add the first code to your style.css. I think it would look cooler if you did :slight_smile:


#8

Hmmm… I entered both codes as shown. first one in index.php second code in syle.css

I just checked again- both in there.


#9

That’s strange. Can you add the code from my last post?


#10

I ADDED THAT AND NO CHANGE. I TRIED WITH AND WITHOUT THE FIRST CSS ADDITION PART. CURRENTLY I HAVE THE INDEX.PHP ADDITION AND

.welcome-image { border: 1px solid #E0E0E0; overflow: hidden; } .welcome-image img { -webkit-transition: all 0.4s; transition: all 0.4s; } .welcome-image img:hover { -webkit-transform: scale(1.2) rotate(3deg); transform: scale(1.2) rotate(3deg); -ms-transform: scale(1.2) rotate(3deg); }

AND I DO NOT HAVE THIS IN THE CSS:

.welcome-image { margin-bottom: 30px; }

btw, DOUBT IT MAKES A DIFFERENCE, BUT IT IS AT THE END


#11

caps lol


#12

Now I see the problem. You broke some code for some responsive styling.

Add this } right above your first .welcome-image in the style.css. You’ve deleted it when you used the first code :wink:


#13

you’re right. I added it. still no change :frowning:


#14

Looking at your code, it doesn’t seem that you did.

This part:


@media only screen and (max-width: 320px) {
	.entry-title {
		font-size: 26px;
	}
	.entry-meta span:not(.posted-on) {
		display: none;
	}
	.entry-meta span:after {
		content: '';
 }
	.welcome-image {
   		border: 1px solid #E0E0E0;
   		 overflow: hidden;
}

Needs to be this:


@media only screen and (max-width: 320px) {
	.entry-title {
		font-size: 26px;
	}
	.entry-meta span:not(.posted-on) {
		display: none;
	}
	.entry-meta span:after {
		content: '';
        }
 }
	.welcome-image {
   		border: 1px solid #E0E0E0;
   		 overflow: hidden;
}

You’re still missing a closing curly brace.


#15

Wow thank you so much. It works now. I eyeballed it 10 times and looked the same and I even changed with what you had…luckily i didnt mess it up too bad.

THANK YOU. YOU ROCK