Multi-question from an unsavvy user

[Massimo Bonamici]

Hi Bill,

Thank you for your gorgeous websites first of all. I am trying to make the best out of Selfie, but I feel quite hopeless.
Here I have few questions for you, hoping that are not to many!

1) How to move the logo further up and left? Or in the right corner?

2) How to prevent the page from bumping up and down after scrolling? (iphone, windowsphone)

3) How to change the color and the position of the plus (+) symbol that appears in the lower right corner? Is it possible to change it in an arrow (->)?

4) How to use the About me page as in the demo? (fix picture and text appearing from the left side of the screen?)

5) Hot to put a link in the footer area?

6) Hot to insert a movie just like in the demo (vimeo)?

Thank you!

Bodhi

[Bill Robbins]

Good Morning Bodhi,

Let’s find answers for you.

1. It appears that you’ve already taken out the “top” and “left” from the logo out. So it’s just the empty space in the logo image file itself that’s creating the distance between the logo’s graphic portion and the edge of the screen. I would crop the image so that there is less space there and that should move it for you.

2. The theme is made so that if you stop between images it will scroll to the closest one. You can take that out by editing the theme. Here’s what to do:

1. Go to the Appearance section in your WordPress dashboard and choose Edit.
2. From the list of files on your right, choose custom-js.php and remove this section:

   
   // Window Scroll Options
   	jQuery(document).ready(function(){
   	
   	    jQuery('.window').windows({
   	        snapping: true,
   	        snapSpeed: 200,
   	        snapInterval: 500,
   	        onScroll: function(scrollPos){
   	            // scrollPos:Number
   	        },
   	        onSnapComplete: function($el){
   	            // after window ($el) snaps into place
   	        },
   	        onWindowEnter: function($el){
   	            // when new window ($el) enters viewport
   	        }
   	    })
   	
   	});
   

3. Save your changes.

---

3. You can change the plus sign. Here’s how:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   a.pop-open {
   	bottom: 10px;
   	right: 10px;	
   }
   
   a.pop-open:before {
   	content: '\24';
   	color: #fff;
   }
   

   The top style there sets the location of the plus sign. You can adjust the bottom: 10px and right: 10px to set how far from the bottom and right it will be. The bottom style sets the color and also changes it to an arrow.

3. Update your settings.

---

4. Animations. The about me block uses an animation that’s built into the theme. You can read about it in the instructions at https://support.organizedthemes.com/selfie/

---

5. Footer link. You’ll need to edit the footer. Back in the editor, choose footer.php and find this line:

<p><?php echo of_get_option('footer_text'); ?></p>

and change it to be something like this:

<p><a href="http://yoururl.com">Link Text</a></p>

replacing http://yoururl.com with the URL you’d like to link to and the Link Text with the text you’d like to have displayed there.

6. Video. Edit the home block where you’d like to have your video. In the spot for the home block media you’ll see a section called “Gallery Video” with a button in it. Click to add a video. In the field that appears enter the URL to the video you’d like to use and update your home block. That should add in your video from Vimeo or YouTube.

---

If you have any other questions, let me know. You may want to break lists of questions into individual topics. Follow up questions tend to get jumbled up when they are mixed together.

Have a great week,
Bill

[Bill Robbins]

Good Morning Bodhi,

Let’s see if we can get you moving with these items:

(3) I can see part of the code from above on your site for the plus sign, but not all of it.

a.pop-open {
	bottom: 10px;
	right: 10px;	
}

a.pop-open:before {
	content: '\24';
	color: #ffffff;
}

You can change the color by replacing the #ffffff with the color you’d like to have there.

The content: ‘\24’; is the portion that sets the arrow. It may be filtered out by the theme options page for security. If that’s the case you will need to use a plugin called JP Custom CSS to add that to your site (https://wordpress.org/plugins/jp-custom-css/).

(4) The alignment is set in the animations. It is possible to change it. If you would add the animation to your page and let me know what you’re wanting it to be like. I can then show you how to change that, but I’ll need to be able to see it on your site in order to so.

(5) Looks like there are a couple of things happening in the footer. Delete that line and replace it with this:

<p><a href="http://bodhiartworks.com">Please visit www.bodhiartworks.com for more</a></p>

You can then add this to the CSS to make it red and center aligned:

#footer {
	width: 100%;
	text-align: center;
}

#footer a {
	color: #fc403a;
}

See how that works for you. Let me know if you have any trouble.

Have a great day,
Bill

[Massimo Bonamici]

Good Morning Bill,

As usual, thanks for your help!

(3) No way to get it working. I installed the suggested plugin, but the
arrow continues to appear split in two pieces. Well I suppose that I can use
the plus symbol as well.

(4) I would like the animation to work as in the Selfie Live Demo, with a
picture and the text appearing from left

(5) Where exactly I should paste the code

#footer {
width: 100%;
text-align: center;
}

#footer a {
color: #fc403a;
}

in the footer.php file?

Thanks!

Bodhi

[Bill Robbins]

Thanks so much for posting here. That really does help me out quite a bit. Let’s see how we do this time:

(3) I may not have been really clear here and I want to make sure we go through every possibility here. With the plugin, did you add that CSS by going to the Appearance section in your Dashboard and clicking on Edit CSS? I don’t often use this myself, but I was under the impression that we could use a \ there unlike in the theme options.

I realized in my post that it could appear that you needed to activate the plugin and then make the changes in the Theme Options page. With the plugin you go to Appearance > Edit CSS to do that.

(4) Here’s the text from the home block that uses animation in the demo so you can see how it works. You’ll need to view the forum post to see it correctly:

I typically add in text via the text tab of the editor instead of the visual tab. Sometimes that can help the animations lay out better.

The image used in that block is just the hero image in the background as usual.

(5) You can either add that code to the Custom CSS box in the theme options page or since you’re using the CSS editor by going to Appearance in your Dashboard and clicking on Edit CSS. Either place should work fine.

Let me know if you have questions or trouble.

Enjoy your afternoon,
Bill

[Author]

Posts