Welcome! To use this support forum, please Login or Join Today!

   

Synapse Questions

{name}
Rank

Total Posts: 10

Joined 2012-05-11

PM

 
Hello,

I've just installed Synapse and I have some questions. Maybe I'm just missing something in the settings?

• Multiple tags breaks the layout and pushes the "comments" link on top of the last tag of the line.
• Clicking a tag does not lead to a page with posts that have the same tag.
• The "continue reading" button has a green arrow before the text and a white one after. Maybe either one or the other?
• When clicking on an individual blog post or a page, the sidebar moves to the left (despite having chosen a right hand position in the general settings and page layout settings).
• How do you add the black bar under the navigation (as in the demo)?
• How can I get the images in the blog to automatically scale in mobile versions?
• How do you add your blog to the nav bar?

I also wonder how you customise the colour scheme. What I'd like to do is use the blue one as a base and change the colorus to shades of purple.

Thanks,
Kate
{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Multiple tags breaks the layout and pushes the "comments" link on top of the last tag of the line.


Can you provide an example or screenshot of what you're seeing? How many tags are you using? This is probably something that can be tweaked with a little CSS.


Clicking a tag does not lead to a page with posts that have the same tag.


Did you install the theme prior to the latest update? I believe this was fixed:
http://www.simplethemes.com/wordpress-themes/changelog/synapse


The "continue reading" button has a green arrow before the text and a white one after. Maybe either one or the other?


I agree, that doesn't look right. I'll fix this in the next update. For now, you can add this rule to remove the arrow:

span.meta-nav {display:none;}



When clicking on an individual blog post or a page, the sidebar moves to the left (despite having chosen a right hand position in the general settings and page layout settings).


I'm unable to reproduce this. Does putting the theme in "Live Mode" have any effect? If you can PM me your wp-admin details, I'll be glad to look into it.


How do you add the black bar under the navigation (as in the demo)?


This is the "Teaser" widget location. Appearance → Widgets → Teaser Widget Area.
You can specify which pages the widgets appear on by using the Dynamic Widgets plugin.


How can I get the images in the blog to automatically scale in mobile versions?


You can add a "scale-with-grid" class to the IMG tag like so:

<img src="image.jpg" class="scale-with-grid"/>



How do you add your blog to the nav bar?


Once you've set up your Home page and Blog page like so:
http://www.simplethemes.com/tutorials/help/home-page-setup

You can add it to the menu bar under Appearance → Menus
http://www.simplethemes.com/tutorials/help/nav-setup
{name}
Rank

Total Posts: 10

Joined 2012-05-11

PM

 
Hi Casey,

Many thanks for your response with ideas for how I can proceed!

Kate England - 22 May 2012 11:09 AM
• Multiple tags breaks the layout and pushes the "comments" link on top of the last tag of the line.


This error (with the tags/comments) vanished when I resized the browser window, and hasn't appeared since. I think it had to do with switching themes. I'll report if it reappears, but I think this one solved itself.

Are the themes updated within Wordpress, or do you look for updates here on the site?

Regarding scaling images correctly in the mobile versions, where do I put the code? In one of the theme files?

I'll PM you with my WP details later on today.

Again, thanks for your help! LOVING Synapse!
{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Are the themes updated within Wordpress, or do you look for updates here on the site?


Yes, I push out parent theme updates once a week. You should be seeing some this evening.


Regarding scaling images correctly in the mobile versions, where do I put the code? In one of the theme files?


Images can be mobile-responsive by adding a "scale-with-grid" class to your IMG tag like so:

<img src="yourimage.jpg" class="scale-with-grid" alt="image"/>

{name}
Rank

Total Posts: 10

Joined 2012-05-11

PM

 
Hello Casey,

• I updated Synapse which resolved the tag issue.
• Fixed the menu with the help of your excellent instructions.
• I tried both Live and Customization mode, but it didn't solve the issue with the sidebar.
• Installed the Dynamic Widgets plugin and activated the Teaser Widget Area. Very nice. Black bar below the navigation bar. How do I activate the black bar at full page width (as seen in the demo)?
• Regarding images. I added the image class you suggested to a picture on my About Page but it didn't change anything. It would be a lot of work to manually add the code to each image. Is there a way to simplify the process?

New Problems:
• I discovered that my Google analytics code is displayed visibly at the bottom of each page. Presumably I've made a mistake. Here's what I've pasted into the settings (x instead of the actual id number):

try {
var pageTracker = _gat._getTracker("UA-xxxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}

• Is there a way to remove the image and link to simplethemes (displayed at the bottom right of each page)?

Alrighty, now I'll PM you with my WP details.

Thanks,
Kate

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 
I tried both Live and Customization mode, but it didn't solve the issue with the sidebar.


I wasn't able to reproduce this. I created two pages:
yourdomain.com/left-sidebar/
yourdomain.com/right-sidebar/


How do I activate the black bar at full page width (as seen in the demo)?


If you go to Appearance → Theme Options → General and enable "Wide Container Style", this should do it for you.


Regarding images. I added the image class you suggested to a picture on my About Page but it didn't change anything. It would be a lot of work to manually add the code to each image. Is there a way to simplify the process?


WordPress adds a width and height attribute for HTML 4 validation. It is not necessary in HTML 5. Until they update this, I'm afraid the only way to make images responsive is to remove the width and height and add the class scale-with-grid.

There is an easy workaround if you don't want to look at code. Just insert the image as normal, then hover over the image in the editor and click the "image" icon. That will bring up this dialog:

http://screencast.com/t/XV7j4Coyb

Just clear out the width and height fields and add the "scale-with-grid" to the CSS class area. I've added a responsive image to your site in the "Left Sidebar" page at yourdomain.com/left-sidebar/.



I discovered that my Google analytics code is displayed visibly at the bottom of each page. Presumably I've made a mistake. Here's what I've pasted into the settings (x instead of the actual id number):


No problem. You just didn't wrap in the script tag. I've fixed this for you.


Is there a way to remove the image and link to simplethemes (displayed at the bottom right of each page)?


Yes, just paste this to your functions.php:

function st_footer() {
//loads sidebar-footer.php
get_sidebar( 'footer' );
// prints site credits
echo '<div id="credits">';
 if (has_nav_menu('footer')) {
 st_footernav();
 }
 echo of_get_option('footer_text');
 echo '</div>';
 }
add_action('wp_footer', 'st_footer',2);

{name}
Rank

Total Posts: 10

Joined 2012-05-11

PM

 
A big thank you for your help, Casey!

Thanks for fixing the Google code! I got the black bar to work the way I'd like it to, and I've applied the code you suggested to make the images scale correctly to a few images and got that to work too. I don't have a problem with coding (although I am by far an expert). I started my blog in 2007, so there are a LOT of images to make these changes to. I'll have to do a few every week, and gradually get the whole site updated.

I discovered that the issue with the sidebar occurs when clicking links to individual blog posts via
a) the sidebar widget for "popular posts"
b) the archives (page located in the navigation)
c) the related posts widget

Layout
In mobile mode (cell phone), single post layout only, the category is a little close to blog title?

Images
Where do I install my own favicons and logo? I'm using the Child Theme, which I understand is the recommended way to go.

Usability Question
Do you think it might be more logical for comments and tags to be located at the end of a post, rather than the beginning? I was thinking that it is often after having read an article that you become more deeply involved and might like to comment or look for related material? That way there would be less visual "clutter" at the beginning, and yet you'd find the resources when you needed them? Just a thought?

Speaking of coding… I just tried adding the code you suggested to my functions.php and managed to mess it up. I'll have to look into that tomorrow, too tired right now.

Thanks,
Kate
{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

I discovered that the issue with the sidebar occurs when clicking links to individual blog posts via
a) the sidebar widget for "popular posts"
b) the archives (page located in the navigation)
c) the related posts widget


It looks like these individual posts are obeying the theme default settings. In order for the sidebars to be displayed different than defaults, you'll need to re-save the post with the settings. It seemed to work for me anyway.


In mobile mode (cell phone), single post layout only, the category is a little close to blog title?


This is overflow from the breadcrumb nav. Are we looking at the same thing?
http://screencast.com/t/sCAgXYYpqm

At any rate, a simple fix for this is to suppress the overflow with a CSS rule.

#breadcrumbs {overflow:hidden;}


If it were me, I'd just say hide the breadcrumb nav altogether in mobile view. If you want to do that, you can add this rule:

@media only screen and (max-width: 767px) {
 #breadcrumbs {display:none;visibility:hidden;}
}


Where do I install my own favicons and logo? I'm using the Child Theme, which I understand is the recommended way to go.


These images are located in the the child theme's images folder:

images/favicon.ico
images/apple-touch-icon.png
images/apple-touch-icon-72x72.png
images/apple-touch-icon-114x114.png



Do you think it might be more logical for comments and tags to be located at the end of a post, rather than the beginning? I was thinking that it is often after having read an article that you become more deeply involved and might like to comment or look for related material? That way there would be less visual "clutter" at the beginning, and yet you'd find the resources when you needed them? Just a thought?



I agree it would help to keep the clutter to a minimum for sites that use more than two or three tags.
I'll definitely look into adding some more granular options here.



Speaking of coding… I just tried adding the code you suggested to my functions.php and managed to mess it up. I'll have to look into that tomorrow, too tired right now.


Just make sure you add it inside the existing php tags. If you want to PM me your wp-content FTP info I'll be glad to add it for you.
{name}
Rank

Total Posts: 10

Joined 2012-05-11

PM

 
Thanks for your help, Casey!

I added the favicons to the child theme's images folder, can't test in live mode yet, but it currently seems like the customised favicon only is visible within the WP admin areas and not on the site. I'll be able to test this when I make the changes come live.

Regarding your screenshot, yes that's what I'm seeing too.

When it comes to fixing the position of the sidebar in each post, by going in and re-saving each post, I think I'll save that until I've seen if I can create the general look and feel I'd like for the site. As it would take some time, but is simple to do.

I'll need to get back to you with my ftp-details, but for now I wonder where I make changes to the child theme. Which files can I safely edit without causing problems when Synapse is updated? Also, should one edit the files live, within WP, or is it better to edit the files on one's computer, and then upload them? I'd like to modify the colours and add Google fonts.

Taking the site out of maintenance mode now, and will continue working on it on and off, when I can make the time.

Thanks,
Kate
{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Which files can I safely edit without causing problems when Synapse is updated? Also, should one edit the files live, within WP, or is it better to edit the files on one's computer, and then upload them?


Anything you copy over from the parent theme into the child theme folder will not be ovewritten by updates. This includes template files and CSS and any function(s) you want to re-declare and modify within functions.php.

Most users can make the desired changes within the theme options, however if you're feeling adventurous and want to make more advanced customizations you can copy over the style.css and style{x}.css files and make more advanced color/padding/margin customizations therein.

If you're wanting to add custom markup to the theme, it's best to look at the parent theme functions.php and see what it does.

{name}
Rank

Total Posts: 10

Joined 2012-05-11

PM

 
Hi Casey,

You'll be glad to hear that I've slowly been making progress with Synapse. The favicons seem to be working now that I've let Synapse go live on the site. Unfortunately though, I've run into a few new or renewed problems.

The Google code that you helped me fix has somehow stopped working. Not sure why?
The pagination seems a little off? See attached screenshot.
Image caption vanishes when you add the code that make the images scale as intended for responsive design?

I've been trying to add "Dancing Script" from Google fonts, to H3 (and possibly H4) tags, to create a bit of contrast and personality. I can't get it to work correctly. Am I right in thinking that you add the script in
Synapse Child Theme Options > General Settings > Footer Scripts
and the css to
Synapse Child Theme Options > General Settings > Custom CSS

Thanks,
Kate

Image Attachments

synapse-pagination.png

Click thumbnail to see full-size image

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 
Hi Kate, I cleared out my inbox. Could you resend your wp-admin details and I'll be glad to take a look.

For Google fonts, some changes may need to be made, so if you could also provide FTP info I'll see what I can do to speed it up for you...and of course let you know how to make changes.
{name}
Rank

Total Posts: 10

Joined 2012-05-11

PM

 
Thanks so much, Casey! Just sent you my login info in a private message.

/Kate
{name}
Rank

Total Posts: 10

Joined 2012-05-11

PM

 
I just got some email from visitors who apparently aren't able to leave comments. So I tried myself and unfortunately, commenting doesn't work. What might be up?
{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 
It looks like that bottom left flyout menu is covering up your submit button next to comments. I PM'd you about this earlier.
{name}
Rank

Total Posts: 10

Joined 2012-05-11

PM

 
Hi Casey,

Thanks! I've just removed the code and sent an email to Shareaholic concerning this issue.

Cheers,
Kate