can you use any css in a yola site?

  • 2
  • Question
  • Updated 8 years ago
  • Answered
I was just wondering, can some css be used in Yola?

I ask as I have created a photo album from some software which allows you to incorporate it into your website. You have to upload the files to your site, of which, the files consist of html, jpg, css and alb formats.

I uploaded the files to my file manager, but am a bit confused as to which ones should be used in a html widget. Only html ones I'm guessing?
Photo of tels7

tels7

  • 19 Posts
  • 0 Reply Likes

Posted 10 years ago

  • 2
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Hi Tels7,

Yes you put the html code in the html widget and then in the html widget link to the css file you have in your resources folder eg. (.....) . Ask if you have any other questions.

Connor
Photo of Ruth

Ruth

  • 2819 Posts
  • 135 Reply Likes
Hi tels7,

Do you mind sharing which photo album software you used?
Photo of tels7

tels7

  • 19 Posts
  • 0 Reply Likes
Thanks for the advice on css. I will try that.

Sorry, I should have mentioned the software, its Web Album Generator available to download from here:

a
Photo of tels7

tels7

  • 19 Posts
  • 0 Reply Likes
Oops, link didn't materialize, here it is again:

http://www.ornj.net/webalbum/
Photo of tels7

tels7

  • 19 Posts
  • 0 Reply Likes
I tried to do Connor's suggestion , but It hasn't worked.

I take it I just copy/paste my index.html file straight into a html widget, as the html file cannot be uploaded to the file manager as it is a restricted file. If that's the case, how do I incorporate the other files marked html as they are part of the web album?

All .css, jpg, alb files have uploaded successfully to the file manager.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
it would be code form the html file not the file itself.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
sorry i see you understood that. :) my bad.
Photo of tels7

tels7

  • 19 Posts
  • 0 Reply Likes
Yes, I've copied the source code from the index.html file into a html widget, but what do you do with the other files labeled html then?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
what code exactly is on these pages? - i presume you could link to them somehow. Ive seen people link to code before - how they did it now exscapes me.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hello tels,

Can you tell us how many files are generated by the album generator?

I've had a look at some of the help files of the generator.

In the advanced facility I would turn off: PhotoX.
Don't allow HTML markup for Titles and captions.

That should reduce the number of HTML files and hopefully you will be left with only one.
Photo of tels7

tels7

  • 19 Posts
  • 0 Reply Likes
I have 12 files in total, of which 4 are html. You get an index.html which is what I've put in a html widget, but then a html file is generated for each picture you have.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
im going to download the program - see what i can do - its to hard to say when you dont know the exact codes involved. Lee.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Ok - It does work just needs a bit of a work around.

1. Upload your CSS and on all 3 pages add the link Connor gives you at the top of the page.

2. Add all your images small and large to your filemanager.

3. add the code from the index.html to your first page. (lets say page1)

4. add the code from the image html files to each other page. (lets say image 1 html - page2 ---- image2 html - page3 and so on)

5. When adding the code from step 3 and 4 only add what is between the body and the /body tags.

6. Go into the code on all the pages you have made and change the a href links accordingly - for the links to index chnage it to page1.php and the links to the image code pages page2.php etc.

7. While in the code change all the img src= tags to resources/image1.jpg

That'll do it - you'll see it working as you go and it will make more sense.

Lee.
Photo of tels7

tels7

  • 19 Posts
  • 0 Reply Likes
Okay, seems a lot of work really, but I'll give it a go.

I think it might be just as quick to make my own thumbnails of pictures and just use the Yola tutorials.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
you want to see it working - its easy once you get going - thansk to my lovely girlfriend for the images .

http://imagetest.yolasite.com/
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
PS - i couldnt get the CSS link to work - i added the CSS to each page wraped in <!--

<style type="text/css">

</style>

-->
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
tels7 -

Its easier than it sounds

Just think of all the html files as seperate pages - add the html to seperate pages then change the links accordingly - all the image files need resources/ infornt of the file names - i think its worth it and its a great lesson in html and page management.

Remember Yola pages are .php not .html.

Good Luck.

Lee.
Photo of Ruth

Ruth

  • 2819 Posts
  • 135 Reply Likes
Thanks for your help with this one.
Photo of tels7

tels7

  • 19 Posts
  • 0 Reply Likes
Okay, thank you for your time. Your demo looks great.

I'll give it a go over the next few days and see if it works for me!
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Thank YOU for the link, its a great tool and i think it looks really good, i will be using it for real somewhere in the future.

If you need anymore help with it whiule making it just reply to this thread.

Lee.
Photo of Zaur Kavkaz

Zaur Kavkaz

  • 2 Posts
  • 0 Reply Likes
How do i Edit the Html not Css? other site builders have it this one doesnt give me the option to edit the site in html or css can you help me ?
Becuase i wanna add something to the template of the site not the body
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Zaur

It is not possible to have edit the source code. What you can do is tweak the HTML of your template by adding the CSS hack to an HTML widget. If you can let me know what you're wanting to do, then perhaps, we might be able to help you get this implemented.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Brittney,

While you wait for Sanja I thought you might like the specific code you need to move on (change your menu colour)

You can alter the page style by adding the appropriate CSS to a html widget on the page, this counter acts the default style.

Sanja will explain better later.

Start with this > Add a HTML widget to the top of your page.

Then > Add the code below to it. <!--

<style type="text/css">

#navlist li a:hover {
color: #FF0000;
background: #333;
border-right: 4px solid #FF0000;
}

</style>

-->
I've alreday changed it to red - you see the 2 #FF0000 ?
They are the colours - the top 1 is the color of the text and the bottom is the border on the right of the menu - You'll see, have a play round with it.

If you want to start again just remove the code and you will be back as it always was (pink)

When Sanja is back on line she will help you further.

Lee.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Perfect Lee! Thanks so much for your help on this.

@ Brittney - please let us know if you have any trouble with this.
Photo of Brittney Kester

Brittney Kester

  • 2 Posts
  • 0 Reply Likes
Oh! Its nice to see some familiar CSS lol. Thank you for that since I don't believe I would have figured that out, but one more thing. If you look at the menu options on that template, they appear to be underlined! Makes it look a bit weird, and i was hoping that there was also away to remove that as well. Sorry for bugging you.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Brittney,

I have the feeling me, you and Sanja all live in different time zones :)

The funny thing is yesterday I thought 'That underlined text looks wrong' and I was going to include the code to get rid of it but didn't want to confuse the matter.

Add this code to the same HTML widget (inside your style tags) <!--

#navlist li a{
text-decoration: none;
}

-->

Let me know if you need anything else.

Lee.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Nice work Lee!