Choose a random snippet!
Watchers
... and more
Total number of visits:
Hi Rob,
Thanks for the assist, it is greatly appreciated. I have used your suggestion of right top and you are correct it does look better.
Not to worry about the tranparency etc. I used Gimp and lightened the pic to get the same effect, at the same time I shrunk the pic as well. I does fit better on Tablets and lower resolution screen but still a bit yuk on 1080… :-( For now it will do.
Again thank you for the assistance.
Regads,
MGB.
You're very welcome, I'm please it worked. And welcome also to the wonderful world of CSS! For the sizing, all I would do is to change the background-position from center top to right top so that all the Clash of the Titans text and shield is displayed. It looks a bit better in my opinion. Just do that on your admin:themes pages, save it and the change will be there.
Transparency is a tricky one. You can't use opacity on the container-wrap rule because that will also affect the text and all other elements on the page. It hink you'll need to look at changing a lot of the text colors. I'll have a look and see what I can suggest that might work.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview - Wikidot-based intranet, knowledebase and website development and management
Hi Rob,
Thank you very much for the feedback. I apologize for posting it in the incorrect forum, I did try to move the post but I was not able. I do not have the correct permission.
I followed your steps to add the back ground to the whole site and it worked wonderfully. Thank you very much, I need to go and fiddle with transparency as well as sizing the image. Thank you for the help I do appreciate it.
Again appologies for posting in the incorrect forum.
Regards,
MGB.
Welcome to Wikidot. This snippets site is not a general support forum, so in future you'd be best to post questions like this on the community forum at http://community.wikidot.com/forum:start where you'll get a quick response 24 hours a day.
But to answer your question, there are a couple of ways of adding a background image to all pages. One is to add it into the live template page(s) _template on the site. The other is by changing the CSS (custom stylesheet). With CSS you can change every element on your page and create your own theme so it's worth learning.
But it depends where you want the background image as to what the CSS rule is that you will need to set. We'll show you a couple of couple of examples.
On your mzansiforce site you have a page called admin:themes which you can access by entering that in your browser address bar (http://mzansiforce.wikidot.com/admin:themes).
First of all upload the image that you want to use to that page using the Files button at the bottom of the page.
Then edit that page and you'll see a a codeblock starting [[code type="css"]]. In that codeblock below the @import rule add the CSS rule for the background image:
[[code type="css"]]
@import url(http://themes.wikidot.com/green-grass/code/3);
#container-wrap {
background-image: url("/local--files/admin:themes/YOURIMAGENAME.jpg");
background-position: center top;
background-repeat: no-repeat;
}
[[/code]]
An example of the result of that can be seen on my test site here where the whole background is an image.
But make sure in your site manager at admin:manage -:> appearance -> themes you set the theme to be an external theme /admin:themes/code/1
If you just want an image in the content part of every page then you can either add it to your _template page like this:
[[image /admin:themes/YOURIMAGENAME.jpg]]
%%content%%
Or you could add it to the CSS in the same way as in the first example but using the #main-content rule instead of #container-wrap.
You might also want to read some of the how-tos about designing your site which you can find at http://community.wikidot.com/howto:_start. One which might help you adding your own CSS is http://community.wikidot.com/howto:flexible-css-putting-css-on-its-own-page.
Depending on the theme you are adding to you might need to make other changes to the CSS as well to get the result you want. In which come back to us on the community forum.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview - Wikidot-based intranet, knowledebase and website development and management
Hi all,
I'm trying to set a page back ground picture for all pages in the wiki but I'm not having any joy setting it up for one page :(
Can anybody please assist?
Thank you.
Thanks. As mentioned in the background section, I was inspired by your excellent solutions.
WOW! This is an outstanding invention!
Big well done Ed, this is awesome!
@tsangk, yes, yes I did :S
λ James Kanjo
Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript
[embed]]
<script src="http://flash.revver.com/player/1.0/player.js?mediaId:1033087;width:480;height:392;" type="text/javascript"></script>
[[/embed]]
That's not possible with a CSS solution like this. You should add a wish for it on feedback.wikidot.com. There are a bunch of tag-related wishes, but none of them seem to ask for the kind of filtering you want to do.
hiding tags starting with a single letter or two
You are awesome. Thank you.
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.pl/maps?hl=pl&ie=UTF8&ll=53.088251,18.476257&spn=0.214853,0.676346&t=m&z=11&output=embed"></iframe><br /><small><a href="https://maps.google.pl/maps?hl=pl&ie=UTF8&ll=53.088251,18.476257&spn=0.214853,0.676346&t=m&z=11&source=embed" style="color:#0000FF;text-align:left">Wyświetl większą mapę</a></small>
can this be used to when embedding pages within wikidot?
I have not found a way to control the output of a standard wikidot page in an iframe..
You can't due to cross scripting restrictions on browsers. It's to stop you being able to inject code via the iframe.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview - Wikidot-based intranet, knowledebase and website development and management
No it hasn't, you've made an error in your syntax and inserted spaces between the values. It should be
minColor="0,102,255" maxColor="102,204,0"
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview - Wikidot-based intranet, knowledebase and website development and management
That depends on the "theme" used for the embedded page-category !
if the theme used for the category of the page is without side bar - tahn only the main content is displayed in the embedded window.
But with header(top) anyway…
I have not found a way to control the output of a standard wikidot page in an iframe..
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
If embedding a page within a page is there anyway NOT to include the side bar?
this works for wikidot but you cannot just embed another page, like if you wanted to do a side by side comparison and see if it can be done with or without a table (really all just to see if can be done)
[[embed]]
"http://link.to.codeblock/example.html#/enterUniqueStringHere"
[[/embed]]
has the coloring formatting changed since the odler posts on this snippet?
minColor="0, 102, 255" maxColor="102, 204, 0"
interesting event, expand first Adventuring and the plain jane tabview below it moves the tabs to the center while the other two do not. the second row again Adventuring moves where the tabs are and Crafting does this time. Wicked effects!
