If you are on the latest version of YM it can give you some much flexibility of what you can achieve with the look and feel of your website.

Below, is how you find out:

(Go to your homepage -> right click and select = view page source | use “Find” or CTRL + F and select “site_templates” | if a little further on it says: “/ym-FX-02………” then you are on the latest template.)

then that is great news because it means that you can use pretty much anything in Bootstrap 3.0 within your YM custom pages.

If you’re not on the latest template then contact YM to discuss an upgrade.

  1. Bootstrap 3 ( https://getbootstrap.com/docs/3.3/getting-started/ )

Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.

The great news is that you don’t need to install it, link to it or even reference it on your page, YourMembership has done all of that for you, so all you need to do is to start taking advantage of its powerful features for creating great pages like these:

https://www.globalschoolsforum.org/page/AboutUs

https://ukoug.org/page/joinus

https://members.baps.org.uk/page/join_baps 

2. W3 Schools ( https://www.w3schools.com/bootstrap/ )

What is Bootstrap

Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins

Bootstrap also gives you the ability to easily create responsive designs

W3 Schools contains lots of easy to understand, clearly laid out advice on how to use Bootstrap 3, with plenty of example code, illustrations and online code editors so that you can try it yourself and see your work come to life on screenW3 Schools ( https://www.w3schools.com/bootstrap/ )

 

3. Canva ( https://www.canva.com/ )

Images bring your page to life and Canva is your easy to use, free online resource to create your designs, add captions to your images, add colours and borders etc. Design anything and publish it anywhere using Canva’s drag-and-drop features and professional layouts. Best of all, Canva is continually being extended, recently with templates for ebooks and its free to use.

4.  ResizeImage.net ( https://resizeimage.net/ )

A really simple, easy to use image editing site, you can resize, crop, rotate, set background transparency and output image format without having to learn Photoshop. It’s simplicity is its strength and it does exactly what it says and no more.

 

5. YM’s Cascading Style Sheet (CSS) for your whole site

To view the CSS in place for your site use the url below but replace the ??? in the url with your YM site url: https://cdn.ymaws.com/????????.site-ym.com/styles/custom.css you can’t edit your sites CSS directly.

As an example this is the CSS for Unity:

https://cdn.ymaws.com/unity.site-ym.com/styles/custom.css

You can add your own CSS elements for each page in the Advanced Editor: YM Content & Settings -> Content Management -> Custom Pages -> Advanced Editor

Alternatively you can override it site wide by creating your own CSS entries at: Content & Settings -> Website Settings -> Meta Tags & CSS -> Custom CSS. In the Update Notice you can also find your YM site url.

 

6. HTML Color Codes ( https://html-color-codes.info )

Colours in an image produce different emotions in people and HTML Color Codes is a brilliant resource to find the colours used in an image so that you can create complimentary content around your main image. Upload or link to the image in question, pick an area on the image and find out the Hex Code eg: yellow is #FFFF00 

 

Share This