Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Seascape Theme
#1
Available in Extend:
http://get-simple.info/extend/theme/seascape-theme/616/

This is a theme built on the Skeleton grid to make it fully responsive down to small phone screen size.

The standard Template follows the Standard GetSimple format of Title and Tagline, Page and Sidebar. There is also a page template without the sidebar.

The header image can be changed through the GS backend without ftp and without editing the theme files and pages can be given specific header images the same way.

[v1.2] The Footer text can be edited through the back end without altering the templates.

[v1.2] The theme is ready for Custom Titles without editing the templates

To change the header image first prepare and upload your image. It doesn't need to be the right size but suitable for resizing to 940 x 160 pixels. Make a Component and call it header. In the component write html image tags to link to your image and define the size. If for instance your image is head01.jpg and is in the uploads folder the contents of the component will be:
Code:
<img src="<?php get_site_url(); ?>data/uploads/head01.jpg" alt="Text Here" height="160" width="940">
That will give you a new default header image. The Theme header image is the div background.there is no need to remove it.

To make an image specific to one page just name the component header-slug where slug is the slug of the page it will be shown on.

To edit the right hand footer text (initially 'Theme | Powered by GetSimple') make a component and name it 'footer'. Put any text or html you like in it. If the component is left without content nothing will be dispalyed. If the component is deleted the site will show 'Theme | Powered by GetSimple' again.

To get custom titles for SEO purposes just upload an activate the Custom Title plugin, then write your custom titles in Page Options. There is no need to edit the templates. If you don't activate the plugin html titles will be 'Page title - Site Name'.


Attached Files Thumbnail(s)
   
Reply
#2
Seascape Theme Demo with additional instructions is up and running here:
Seascape Demo
Reply
#3
Hi, Nice theme.

Personal opinion: The font is not very smooth, especially if I compare it with this theme by you: http://timbowgs.bplaced.net/tutorial/
Reply
#4
(2013-04-10, 03:17:48)datiswous Wrote: The font is not very smooth,...
You are right. I don't know why that is or what can be done about it. Do you?
Reply
#5
It seems a browser issue, probably only in Windows. Chrome doesn't do the anti aliasing well (or not at all):

http://niteodesign.com/web-design/how-to...rendering/

Maybe other fonts give better results

EDIT1:

Looked into it a bit. You can add the following at #imgholder h1:

Code:
#imgholder h1 {
-webkit-text-stroke-width: 0.3px;
-webkit-text-stroke-color: rgba(255, 255, 255, 0.70);

to make the Welcome to GetSimple! title smoother, although it might look worse in other aspects.

Edit2:
Code:
h2 {
-webkit-text-stroke-width: 0.3px;
-webkit-text-stroke-color: rgba(0, 0, 0, 0.45);

Code:
h3 {
-webkit-text-stroke-width: 0.3px;
-webkit-text-stroke-color: rgba(0, 0, 0, 0.3);


Also, the shadow of the text "welcome to GetSimple" is rendered wrong in IE9 (haven't test it in other ie versions yet).
Edit: looks fine in IE10
Reply
#6
Thanks I will have a look. IE9 does support text shadows? IE 8 certainly doesn't.
Reply
#7
Bumping this topic after uploading Version 1.2 with more capacity for editing titles and footer without touching the templates.
Reply
#8
Very new first time GS user experimenting with my first GS site (coming from Joomla! and Dreamweaver experience), so please forgive if I post this in the wrong spot. I am using the Seascape theme and loving it, but for one thing, and I'm wondering if I missed a step along the way.

Images are not responsive. I've removed the width and height parameters in code view but they still don't shrink to fit screen space. Not a great problem except the header image, which in my case has text on the image. On a smartphone, the text is cut off. Other images that are wider than the smartphone screen break out of the container and exceed the width of the screen.

Any suggestions?

Thanks!
Reply
#9
Did you find the demo? There were some instructions on the demo pages for changing header images. 
I think I tried to set up the images so that you could change them through the front end without using ftp or altering the templates.
http://timbowgs.bplaced.net/seascape/one/

Tim W
Reply
#10
(2016-07-22, 04:58:54)Timbow Wrote: Did you find the demo? There were some instructions on the demo pages for changing header images. 
I think I tried to set up the images so that you could change them through the front end without using ftp or altering the templates.
http://timbowgs.bplaced.net/seascape/one/

Tim W

Thank you, Tim.

Yes, found the demo and changing the image itself was no problem ... but it's not responsive.  I tried putting max-width: 100% in the stylesheet for base.css as so:

 #imgholder {
max-width: 100%;

height: 275px;
background-image: url(images/transformations-wellness-center.jpg);
overflow: hidden;
position: relative;

But it made no difference.

EDIT: Oh, wait... I think I see the problem... maybe...  now that I've clicked on the link you provided.  I will get back to you... thanks
Reply
#11
Almost there!

In stylesheet base.css:

#imgholder {
height: auto;
background-image: url(images/transformations-wellness-center.jpg);
background-repeat:no-repeat;
overflow: hidden;
position: relative;
}

In header component:

<img src="<?php get_site_url(); ?>data/uploads/images/transformations-wellness-center.jpg" alt="Transformations Wellness Center" height="auto" width="100%">

Now it's working except a very small sliver of the image repeats below the image in smaller screen sizes. I can live with it.
Reply
#12
Fixed it by removing the image from the stylesheet. It was doubling the image up on the page. We are good now, thank you!
Reply
#13
(2016-07-22, 05:47:42)CABass Wrote: Fixed it by removing the image from the stylesheet.  It was doubling the image up on the page.  We are good now, thank you!
 #imgholder {
height: 160px;
background-image: url(images/headbg.jpg);
overflow: hidden;
position: relative;
}

Thanks so much for this information, had this problem and sorted it out in 5 minutes. You have a small error above where you have listed the code you used for the header component. There is a forward slash missing before "data", which will confuse some people. 

Great theme too Tim.
Reply




Users browsing this thread: 1 Guest(s)
Free HDTV Channels Residential Solar Panels