Surfarama is a simple, bold and colorful theme suited to blogs and online magazines who like to feature great imagery. See this short video for a demo…
http://www.youtube.com/watch?v=qXEsIM8IUDw
It is fairly customizable right out of the box with the ability to do the following with no coding necessary:
- Upload your own logo
- Add social media profiles
- Set the primary, secondary, background and link colors
- Choose whether to display category tabs and borders around posts on the home page and archive pages
- Color code each category
Building a new site? Looking at hosting options? We recommend Siteground, Bluehost or GreenGeeks. You can see our complete list of all the top WordPress hosts.
294 thoughts on “Surfarama Theme”
I created and activated the surfarama child theme. If I copy the file functions.php in the child theme folder, the site does not work and it appears a white screen.
Be sure that your function.php file in you child theme folder has a opening PHP tag and no extra white space on the 1st line. For more information, follow this link, Child Themes
Thanks for this great theme. I’ve set a static homepage, but my problem is that nothing is showing up. Whatever I do, whatever page I set as home I just get a blank page. Any idea why? Many thanks.
Hi Mark, are you using any plugins? If so I recommended disabling these temporarily to see if that changes anything. If so then you can enable them again one by one to see which one specifically is clashing with the theme.
Hi Charles. I’ve deactivated every single plugin but I still have the same problem.
Hmm, I’ve been able to duplicate this bug. Working on it now. Will release an update asap. Thanks for the heads up.
Hey, excellent theme!
Is it possible to add the time and date to posts on the home page? What coding would I need to add and to what file and code? Thanks a lot!
You can try this code
<?php the_time('l, F jS, Y')?>, you can place this code inside all the post format files like content.php, content-video.php, etc. below<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'surfarama' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php if(the_title( '', '', false ) !='') the_title(); else _e( 'View Post', 'surfarama' ); ?></a></h2>Hello, I am very interested by this awesome theme. However, I would like to individually set the size of each block. Is it possible ?
I see that the last-post block is bigger and that some posts are middle size, and other small size. How to set that ?
Hi Zampaï, the size of the blocks is not a setting, it is determined by the dimensions of your photo. In other words all blocks are the same width, only the height adjusts automatically determined by the dimensions of the featured image. The only exception is the latest post (or latest ‘sticky’ post if you use that feature of WP) which is always double the width.
Hope that makes sense.
THX.
HI. I love that theme! Small problem: the search box get’s stuck all the time. How do i fix that? Thank’s.
Hi Shahak, what you mean by ‘the search box gets stuck all the time”. Can you share a link to your site so we can check it out?
Hi Charles! I meant that the search box is getting stuck, when trying to search the site. You can check my site and see the problem (i hope) – Thank you !
Hi Shahak, hmm, I don’t know what is causing that. To be honest I know nothing about setting up WordPress to run RTL so I don’t know if the changes required would cause this or if indeed you have a plugin of some sort which might clash with the code in the theme. If you are running some plugins I suggest first that you try disabling these and see if that “fixes” the problem. If it does then you can enabled them again one by one until you identify the one which causes the clash. Then you can determine if you really need that plugin or if there is another alternative plugin which doesn’t cause the clash.
Hi! Your theme is really great! I just want to ask how to lengthen or show the full content or the excerpt when shown in the archives. I tried to find the values in functions.php but no success. Any help would be appreciated.
Locate content.php and for all the post types(for example: content-aside.php, content-chat.php), then inside this div
<div class="entry-content post_content">, add this code<?php if (is_archive()) {echo surfarama_excerpt(100);
} ?>
Hi!
Just love the way this theme looks, but I am getting an error message everytime i wish to click on a post or anything else for that matter… it says: The requested content cannot be loaded. Please try again later.
Hope you have a fix for this.
(I am trying this on my android tablet with google chrome and chrome for windows, both are having this issue.
I am removing the theme from my site for now, because it’s not functionel, but would love to get it working.
Hi Linda, I don’t know what would cause that. It’s possible there is a clash with a plugin you are using, but I can’t be sure. Are you using a plugin for the translations?
Hello there,
I use the plugin cforms with surfarama theme.
I would like to have the same style for forms made ??with cforms as the original forms from surfarama theme.
but I can not do it, and I do not understand why.
someone has an idea ? thx
There are plugins that we cannot override its style. Try to download Simple Custom CSS and in Appearance -> Custom CSS, add your css code.
thank you for the info, I’ll try it now
Hey Charles;
First of all thanks for the great support and quick response time. I want to do a hover effect on the posts in the homepage. But All i imanaged to do is change opacity. If you could help me out would be real cool bro.
Thanks;
PS: I did some trials that resulting in showing the hovering image but it was always shown below the featured image not on top! :/
Anyways Thanks for your time.
Download Simple Custom CSS wordpress plugin and on Appearance -> Custom CSS, add this code,
.grid-box-img img {
width:110%!important;
max-width:110%!important;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grid-box-img img:hover {
width: 100%!important;
}
This is only a simple image hover effect.
Thanks a lot!
Hi,
after update my wordpress to 3.9.2 version my surfarama don’t work…
http://conventagusti.com/maker/
any idea?
thx.
sarok
Hi Sarok, I don’t know why that has happened. I suspect it is related to a plugin clash. I suggest you try disabling any plugins you are using and see if that ‘fixes’ the problem. If so you can isolated the offending plugin by enabling them one by one again until the problem reappears.
thx Charles, they work again… 🙂
sarok
It’s a pity, cause I like your theme in general a lot.
I tried a few themes last night and there was one (can’t remember which as I deleted them afterwards) which had a content-sidebar home page and full width single post by default (already in live preview).
I don’t translate the theme. I translate the inscriptions that readers see (like “Leave a reply”, “Next”, “Comments are closed”, “Tagged”, etc.).
As for deleting the “Bookmark this permalink”, just scan comments here and in wp.org support for your theme and you’ll see that this is one of the main issues with your theme. No one knows how to delete this piece for sure and without messing the files.
One more idea. Why include “full width” tag in theme description and multiple full width templates if your theme actually doesn’t support full width (=no sidebar)?
Please understand I am not trying to be difficult. The theme simply doesn’t have a full width post template. You are welcome to create your own.
The theme includes a full-width tag because it does have a full width template for static pages. Without some kind of plugin WordPress doesn’t support multiple template options for posts (to my knowledge).
Did you use the default.po language file to translate the various theme elements? That should make things fairly easy.
The solution proposed on the WP support forum for removing “Bookmark this permalink” seems to have worked for the folks in that thread and is marked as resolved https://wordpress.org/support/topic/bookmark-the-permalink – To be clear I don’t spend any time responding to queries on the WordPress forum myself simply because I don’t have time. I try to help here if possible, but this is not a day job and some requests are simply too indepth…I can’t provide customization support, for that I recommend Elto or Codeable.
Hi! Great theme, but I will probably have to look for another one due to several issues (that as I can see are the same for many users).
1. Deleting that “Bookmark the permalink” thing causes disappearance of everything except the header.
2. No way to set full width for single posts without sidebars (empty or not).
3. In a lot of cases whenever I translate the inscriptions in some php files into Russian (those sen on the website by users, not any code itself) the same disappearance issue is frequent.
4. I didn’t find the file where I can translate some inscriptions of the comment form (I translated them in some files, but they are still in English). That’s an issue of too many php files that probably substitute each other in a bizarre way instead of having fewer files with an easy way of customising the templates.
5. I would love to hav the option of displaying site title and tagline to the right of the logo, not instead of it.
Thanks,
Andy
Hi, I think that you should probably go ahead and use another theme. To address your questions…
All the best.
Hello
I need to add custom buttons to you template. ACF is great option i this case, but dont know how to setup. Right now you can see that BG on button is set to blue, but i want to be the same like category where is button displayed.
Can you help me ?
Do you mean you want to make the background overlay of the button be the same as the background of the title and excerpt?
Hi, I have a quick question that I have been struggling with for a bit. I am unable to remove the widgets from my site, despite checking and rechecking that there are none in any of the boxes on my WP dashboard. I’ve tried adding them, then deleting them but they never disappear. The widgets are Categories, Latest Posts, Recent Comments, and Archives. Any ideas on how to remove them?
Hi Tim, The theme shows those plugins by default. A dirty ‘hack’ to hide them is to add an empty text widget to the widget area, but to get rid of the widgets altogether you’ll need to edit the template code.
Hi Charles, how are you? I would like to know if it is possible to open all the social media links in a different page? Because now if I click it will go to the social media and I lost my reader.
Regards,
Hi Paula, this is possible but there is no setting for this. You’ll need to add a new target to the links in the functions.php file.
Hi
I’m experiencing a problem viewing my site developed with your template Surfarama. With Internet Explorer I see the main page on four columns while on Google Chrome and Mozilla Firefox I see the articles page on only three columns. (this also happens when I see your demo). How can solve? Thanks
May I know what is the version of your Internet explorer? This problem may occurs because of browser compatibility issues.
I have IE 11 with Mozilla FF e Google Chrome updated to the last release. I want to explain that I see this site properly on IE on four columns, while on the other browsers I see the site incorrectly on three columns. This happens for a couple of weeks so I think is due to the updates of the browser
Hi Giovanni, I can not replicate the problem here. Your site works just fine in Chrome, FF and IE8-11 for me. Can you confirm that you still have this problem? Maybe test on another computer.
Yes you are right. My website working fine on another computer. Well i will try to discover the issues. Thanks for your support
I had the same problem. I fixed it by modifying the style.css file this way:
#grid-wrap {
position: relative;
width: 980px; /* for IE8 */
// width: 61.25rem;
}
As you can see, I only commented the 2nd width entry. Hope this helps.
Hello, I have a question.
Is it possible to have a different background image for each category page?
For this wordpress theme, it is not possible. The background image is set for all pages.
Love the theme, tried plenty and this almost instantly sticked with me. My question is how does the theme determined the order of posts on the homepage. Is it based on the latest published post? Is there anyway to manual set the order of the posts displayed? Thanks!
It is based on the latest published posts.
I really like Surfarama. I like the layout of the home page and the fact that it is very customizable. I do wish I could change the color behind the post text, so that I can tile an image in the background, but still have a solid color under my posts, making them easier to read. Is there any possibility of getting this function? Is there something you could suggest I do?
Hello Christine,
Sorry but I’m not really getting what you mean. But I think this involve css. If you want to change the color, you can go to customize under appearance in your wordpress admin or you can make your own custom css, you can download simple custom css and place your custom css there.
GREAT theme, thanks very much!
One question: is it possible to switch the hver color on the menu to match the custom category color, no matter what custom css i am trying, it still is the color set in the customization menu.
Hi Mark, good question. We did try (and failed) to do that when we first developed the theme, which is not to say it is impossible, just that we couldn’t figure out an elegant way of doing it and gave up eventually. Thanks for the prompt though, we might take another stab at it.
Hurm…well back to trying the custom css then. Thanks!
Hi Charles:
First of all, I want to say you that I love your theme. Also I want to thank you for reply all the problems that people have when they try to personalize it.
And this is mine:
I configured the theme without any kind of widgets and when I publish a post, there is a blank space on the right, that i think is reserved to the widgets (what I haven’t).
I can’t choose the ‘full-with, no-sidebar’ in a single entry as I can with the pages.
How can I select the ‘full-with, no-sidebard’ class as default for all the single posts?
Thanks, regards.
Hi Jesús, this is not possible sorry. Posts all share that same template with the sidebar.
Here is the link to my website: http://theplayer-blog.com/
Please Can I do something about the author of the post and the date it was posted. I kinda wanna get rid of them but i couldn’t figure it out.
Thank you for your fast response bro Have a nice day
Looks like you have figured out how to remove the author and post date.
Hey
I m really digging your theme but i have couple problems. First of all, whenever i put a video on a post it has really weird dimensions 300*600 and when try to view it on fullscreen (from the video post”grid”) It only takes the upper half of the screen and show me a small part of the website on the lower half.
Also I would love to remove the “was posted by” and “the date”
thanks guys
Hi Anass, can you share a link? Also how are you embeddeding videos? It should all work pretty seemlessly if you just paste the URL of the video into your post (WordPress will do the rest).
I love your theme, but I can’t seem to have the tittle of my post show up on the homepage.
I have the featured photo, then the homepage goes straight in the post.
When a visitor clicks on the post, then the post and tittle comes up.
How do I have the tittle of each post my my home page. Either on top of or below the featured image.
Hi Eman, what post type do you use? Use the regular post type and the title should show up.
Hi, yes I did and then the text I had written on the ‘home’ page would not appear…
Hmm, that’s unusual. I can’t think why that would happen. Have you made any customizations to templates or styles?
Hi Charles,
Hi would I be able to change the color of the post when hovering, as well as turning the entire post clickable?
Thanks!
Hi Mamad, you could control this hover behaviour by editing the style sheets, but that will require some customization and if you do that you must set up your theme as a child first as well. If you need help with this you could try Elto.
Hello Charles,
I have currently installed the Surfarama theme and think it’s totally awesome. However I have two questions. First of all, I have chosen a static homepage rather then then blog page. Although I have added text to this page, it doesn’t show on the homepage. When I switch to twenty-thirteen it does show…
Second I am wondering how I can resize the width of the logo on my page. It seems to be just a littlebit wider than anything else…
Thanks in advance, keep ut the good work 🙂
Hi Marc, what template have you assigned to the home page? For the logo, the simplest thing would be to resize the image to fit the space.
Hello Charles, I see now. Thanks a billion! I used full width, no sidebar. Now I changed it to home page with intro and it does show the text, but also the blog posts. The other options also leaves my welcome message out. Is there the possibility to just have a normal page without widgets or sidebars or blogposts? Thanks!
Hi Marc, did you try the “full width, No sidebar” page template option?
I have a site set up, with all posts categorised.
My menu just links to the category and displays any posts from it. However, I’m having trouble with displaying more than 5 categories in the menu.. It’s like whatever 6th category i create (i’ve tried editiing, deleteing, creating a new one, duplicating content from one that works) – it just messes up the menu bar and displays no posts.
Any idea what this limitation is and how it can be solved at all?
many thanks.
great theme! (apart from my issue lol)
Hi @nicholas,
Thanks for using our theme
In WordPress there’s no limitation in adding WordPress Menu, so in that lets go with troubleshooting
1. Do you have other plugin installed? if so disable it all then activated one by one and see if any has a conflict on the current theme
2. Did you try other theme and it works in there? if so then it’s our theme(I just want to confirm)
3. If both didn’t work then try re-installing your theme, just make sure you do a backup first
Hope that helps
hello,
sorry my english s…. but I try to understand the theme
on the home page, I can see three columns, one with lastest 460px wide and 220px with 2 other
if I try to change the css for 300px for 3, it does not work because there is apparently an absolute position triggered by a script (not in the css)
I looked at the file. js (21-93) but without understanding …
I watched archives.php page because there is 4 columns of 220px but I see nothing that would explain why there is 4 columns and 3 here on the home page and where the absolutes positions
Hi @olivoy,
Thanks for using our theme
It is done by Masonry so it positioned absolute, but if you wanted to changed the first Featured DIV or the bigger one yeah it’s possible, open style.css file and at line #1550 or
.grid-box.featured:first-child, .grid-box.latestselector you can update the width in there.The masonry code is in /library/js/scripts.js
Hope that helps
merci, I’ll do a test
yep is ok
+ change .grid-box.latest .entry-title and .grid-box.latest .entry-content and off course MEDIA QUERIES & DEVICE STYLES
A suggestion for a change.
When I flipped the entire site at skank.com.au to use HTTPS, I got a browser warning about mixed secure and non-secure content. I traced it to style.cdd, where in lines 15 and 16 the fonts are imported from Google using HTTP.
I manually changed that to HTTPS, but I believed that using this code will sort it:
@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,700);
16 @import url(//fonts.googleapis.com/css?family=Open+Sans:800); 16 @import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
Cheers.
To avoid any security warning you can simply use // instead of https:// or http://
Hi
What happens when you delete the surfarama theme? I’ve set up a ton of widgets and got the site looking just how I want, but for some reason the comments aren’t showing up when people comment. I probably messed up the code somehow.
I think I need to uninstall and reinstall the theme but I’m nervous about losing all my work or it getting messed up.
Do you know what happens when you delete and reinstall the theme? Or do you have the code to replace for the whole section where the comments go so I could just replace it? I can’t remember what I changed… rookie error.
Thanks
Harri
Hi Harriet, if you temporarily switch to another theme, delete Surfarama and reinstall, then activate it again all your settings and widgets should work as they did. You would however lose any template customizations you made. Alternatively you could just download the theme from WordPress, and replace the templates that seem to have the trouble.
Comments are closed.