Movie in slider? & increase tag & menu size

  • Unknown's avatar
    htiireland · Member ·

    I have changed my template on wordpress.com premium several times now to see which one best suits my requirements.

    http://internationalcouncilofhypnotistexaminers.wordpress.com/

    I want to go back to using Skylark theme but when I do all of my changes are still in place.

    http://theme.wordpress.com/themes/skylark/

    I want to revert the template back to its original settings which i read you do so by the element inspector. Do I simply copy and paste it? i have never used css before. I also want to increase the tag line and the menu bar fonts sizes and if possible have a visible menu bar in the manner i have it now? I also want to include a movie of a rotating globe that repeats on every page as a carousel/slide show, where the current image is on the original template. Is any of this possible? Any feedback would be greatly appreciated.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, I see you have gotten your site back to the original Skylark. To revert back to the original after making CSS changes, go to Appearance > Customize > CSS and delete all the custom CSS and then save.

  • Unknown's avatar
    htiireland · Member ·

    I dont have any custom CSS in the skylark them, i did delete the image template and now wish to revert back to this within the style.

    Many thanks

    jane

  • kathrynwp · Staff ·

    Let let’s see if we can figure this out . :-)

    I want to go back to using Skylark theme but when I do all of my changes are still in place.

    It looks like you’re currently using Twenty Twelve for http://internationalcouncilofhypnotistexaminers.wordpress.com/

    Is that what theme you’ve decided to use in the end, or do you still want to switch to Skylark? Let’s start with this and go from there once you’ve clarified things. Thanks!

    I also want to increase the tag line and the menu bar fonts sizes and if possible have a visible menu bar in the manner i have it now?

    I also want to include a movie of a rotating globe that repeats on every page as a carousel/slide show, where the current image is on the original template.

    I can help you more with these questions once I know which theme we’re talking about.

  • Unknown's avatar
    htiireland · Member ·

    Apologies My wordpress/code language is not up to speed.

    What I am trying to create in my wordpress.com upgraded account is the globe on this page below. Is this possible? It does not have to be flash just a rotating globe that repeats

    http://janebutlerd3.wix.com/iche

    Many thanks

    Jane

  • Unknown's avatar
    htiireland · Member ·

    p.s. is skylark the best most suitable/easiest theme to produce the rotating globe with do you think?

    thank you

    Jane

  • kathrynwp · Staff ·

    Hi Jane, the only way I can think of to get a spinning globe image is by using an animated GIF. You could either find some ready-made clipart (be sure you have the right to use the image first) or create it in a graphics program.

    How to make an animated GIF:
    http://blog.hubspot.com/marketing/how-to-create-animated-gif-quick-tip-ht

    The challenge is that for an animated GIF to animate – and not stay static – the image’s file path has to end with .gif. In WordPress, when you upload a header image or a featured image, the system sometimes adds some extra stuff after the .gif part, with the image’s size parameters (height and width., which prevents the GIF from animating.) If you upload the image exactly at the recommended size, you can sometimes avoid the size parameters from being added.

    To to sum up, in any theme, you could try:

    1. Create an animated GIF that’s exactly the recommended header or featured-image size
    2. Upload it in WordPress as header or featured image
    3. See if it animates

    Let me know how it goes!

  • Unknown's avatar
    htiireland · Member ·

    Hi Kathy,

    I found an animated gif rotating globe on wiki files which was free to use and therefore I was able to copy and paste it into the flounder theme without any coding.

    http://internationalcouncilofhypnotistexaminers.wordpress.com/

    Thank you so much

    Jane

  • kathrynwp · Staff ·

    Great, glad you found something that worked for you! You’re very welcome.

  • kathrynwp · Staff ·

    If you’d like the globe to be a little brighter, you could try adding this custom CSS under Appearance > Customize > CSS:

    .custom-header .site-branding {
	background-color: transparent;
}
  • Unknown's avatar
    htiireland · Member ·

    Hi Kathryn,

    Is it possible to change the format of the theme to be viewed as landscape rather than its current status as portrait?

    Many thanks

    Jane

  • Unknown's avatar
    designsimply · Member ·

    Is it possible to change the format of the theme to be viewed as landscape rather than its current status as portrait?

    There isn’t really a simple way to change the format of the theme from portrait to landscape. Also, when making CSS changes, you should keep in mind that different people will be viewing the site with different screen sizes and browser widths and so the elements may not look as portrait to them as they do to you (for example from a laptop compared to a large desktop display).

    One thing you could do would be to remove the max-width restriction on the main content container and that would result in stretching everything out across the page so it’s full width. However, keep those very large screens in mind because if you stretch text content to wide then it will become hard to read because text is easier to read when it is in narrow columns.

    You can try it out in a test though. To try stretching the whole container width for the Flounder theme to 100% width, add this to your Appearance > Customize > CSS editor:

    @media screen and (min-width: 1280px) {
	#page {
		max-width: none;
	}
}

    Another option might be to take the responsive layout that was designed for the theme when the browser width is 770px wide or smaller and apply that to the whole site. You can do that by copying the section of the original theme CSS that starts with “@media screen and (max-width: 770px)”, taking out the part that says “and (max-width: 770px)”, and adding one rule that makes the sidebar become full width where it appears below the main content area. Here is an example:

    @media screen {
	.site-header {
		float: none;
		width: 100%;
	}
	.site-header .site-branding {
		position: relative;
		float: left;
		height: 180px;
		width: 180px;
	}
	.site-header .site-title {
		height: 180px;
		width: 180px;
	}
	.site-header nav {
		float: right;
		margin: 30px 0 0 0;
		width: 60%;
		font-size: .9em;
	}
	.site-header nav .menu-main-nav-container {
		margin: 0 0 0 210px;
	}
	.site-header nav a {
		padding: 10px 0;
	}
	.site-header nav li:first-child a {
		padding-top: 0;
	}
	.side-widget-area {
		float: left;
		margin: 0 auto;
		width: 100%;
	}
	.content-area {
		margin-left: 0;
	}
	.site-content {
		margin: 0;
	}
}

    As you can see though, it can get quite complex to make such changes, and if you want to customize further than the two examples I’ve included above, then I would recommend that you hire a designer to help you with the changes because they are likely to take some time to work on and sort out and that’s not something we do here. We are here to help you get started learning CSS on your own or with small snippets and changes if you get stuck or have a question. We don’t redesign websites or themes for you, but we do provide the tools and help getting up to speed on them! If you wold like to explore the option of hiring a designer, you might consider asking for a quote at http://en.support.wordpress.com/customize-my-site/request-theme-customization/

    Or if you’d rather learn CSS yourself, I can help you get started and point you toward some really good tutorials. Speaking of great tutorials! These are great if you’re just getting started with CSS:
    http://www.htmldog.com/guides/cssbeginner/
    http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1?curriculum_id=50579fb998b470000202dc8b

    And this one is really good for learning the basics for how media queries work:
    http://en.support.wordpress.com/custom-design/custom-css-media-queries/

  • Unknown's avatar
    htiireland · Member ·

    Your answer was exactly all of my above fears! :-) I have changed the theme to allow the changes I needed and I will most definitely begin investigating your links thoroughly.

    http://internationalcouncilofhypnotistexaminers.wordpress.com/

    Many thanks

    Jane

  • Unknown's avatar
    designsimply · Member ·

    Your answer was exactly all of my above fears! :-)

    Oh no! Well, I think one thing you could do to make things go more smoothly is to pick out a really good theme you really like the base structure of to start with. Also, just to make it a little let daunting sounding… some CSS changes are fun and easy! It’s just that changing the whole structure and layout from portrait to landscape usually isn’t one of the fun/easy ones. :)

  • The topic ‘Movie in slider? & increase tag & menu size’ is closed to new replies.