Making your own header
Hello!
I wonder if it's possible to upload a picture from your computer and then use this picture as a header?
Thread
Forum
» Help / Themes
» Making your own header
Summary:
Is it possible to make your own header for you wiki-page?
Welcome to Wikidot. If you look at many of the sites here at Wikidot you will see custom headers. This community site you are on here has it, all the sites in my signature have them. It's not difficult to do and will get you started with CSS if you haven't used it before so that if you want to you can have a completely custom design for your site.
There is a piece of functionality on Wikidot called a css moduule which allows you to change elements on the page the module is on. But it would be a very bad idea to have a CSS module on every page of your site to set the header image. So it should go into your main site CSS. I don't know how much you know about CSS but I see you are using one of the default themes without any changes. So the following will help get you started and will allow you to remove those buttons.
1. Create a page called admin:css. You can call it whatever you like but most of us use admin:css or css:theme or some variation of that. For now we'll use admin:css.
Upload the image you want to use as your header to that page. Let's assume we've called it newheader.jpg
2. On that page add the following to import the default theme you are using and then add your header image:
[[code type="css"]]
@import url(http://static.wikidot.com/common--theme/cappuccino/css/style.css);
#header {
background-image: url(/local--files/admin:css/newheader.jpg);
}
[[/code]]3. You will only need to do this next step once. Go to site manager -> appearance -> themes. Make sure the _default is highlighted in the list of categories on the page. Then click the "or use an external theme" radio button. A box will open for you to enter the location of the css file. Type /admin:css/code/1. Then click Save Changes.
4. Now go back to the homepage or another page on your site and you should see your new image.
You now have the basics of your own theme on a page on your site. The advantage of this is that it is easy to add new rules and properties and revert back - as with any other page - if you don't like the result. It also opens up the opportunity to have different CSS for different categories on your site. For example you might want a different header image on each different category.
Whenever you want to add a new rule to your CSS just add it on the admin:css page (after the @import which must be first but before the [[/code]], then save the page and the new rule will take effect immediately.
Come back with any further questions or if you have problems doing this.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
This worked for me also http://liming1647.wikidot.com/ Thanks so much!!! This should be pinned to the top it possible.
Ok, I've tried this, but it hasn't worked out as hoped.
http://music1859.wikidot.com/admin:css
I have 3 problems:
1. The j-peg has repeated 4 times.
2. It's not clickable.
2. It hasn't replaced the "Wiki title" and the "Tagline / subtitle" as expected.
Help required!
William
(account deleted)1. Add background-repeat: no-repeat; to your CSS to keep the image from tiling both horizontally and vertically.
2. This thread is only talking about adding a background image to your header. See this How-To for more details on managing the header elements and making it more functional.
3. See #2.
I would suggest starting a new thread if you need more help after reviewing the How-To.
Good Luck!
Thank you Ed, that worked, point 1 sorted ;-)
William
For your question 2, based on the image you've added to your admin:css page:
1) remove the #header h1 a span{display:none;} from the css on your admin:css page. If you leave it as display:none then the header cannot be clickable.
2) In your #header h1 a make sure you adjust the padding and add a width text-indent as follows. The text-indent moves the site title off to the left so it won't be seen but leaves the space clickable:
#header h1 a {
padding: 112px 0 25px;
text-indent: -9000px;
width: 1157px;
}By the way you've repeated the #header rule in your css, you should remove the first one.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Im sorry, im still beginner. where to upload the image file. so, it will be working?
Hello FeliceShine,
Welcome to the Wikidot community forums!
I can see that you are the main administrator for three sites. Which site are you trying to change the header for, and which image would you like to use?
You could upload the image anywhere you want, as long as you point to the correct place in your CSS theme. A good place might be to attach it to your home page, or to the page that contains your CSS.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
This is my first time using wikidot and fortunately I stumbled on this post early as it seems a great way to set up a theme. However, following your instructions for a header image I've yet to be able to get it to display.
I have created an admin:css page and my imported themes (via external url) are working in changing the layout, so all that is set up and I'm confident it's correct.
I have also uploaded the image I wish to use to the admin:css though am still unable to get it to display as the header despite being incredible careful not to deviate from the example you give (except where appropriate with image name).
What other factors could prevent an image from displaying? Do I need to resize it? As I have literally copied everything you have done code wise above, and it's still not working, is there anything else I've missed?
Thanks for your input.
1. "Where" have you uploaded the Image file ( I mean the page-Name Holding the attahed file on your wiki)
2. Which NAME have the Image file ? With blanks in the Name or not? ( blanks are not a good idea! ).
The URL - or better the used "image source" of this file woukld also be interesting…
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 ?
1. I uploaded the image to the admin:css page itself.
2. I did have an underscore in it originally but removed that in case it was the issue.
You should better click on the "Info" link of the file itself on the admin:css page and copy the showing "Full file url" of the file for your Image source ! Than you are on the secure way. You can also test the url by clicking it…
Edit : in most cases the "--" in the /local--files/admin:css/ are not written correct.
like this URL from the community: http://community.wikidot.com/local--files/files/1millionpeople.png
showing this Image.
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 ?
Well aren't you a saviour! It works :)
I copied and pasted, however I'm certain I didn't make an error before (I would say that), I did however add the file extension previously and when copying it I didn't so maybe that was a factor?
Either way, it's not perfect but it's good enough for me to start playing around with and learning more, thanks so much for your help!
Fine, if this is workling now!
Intersting detail with the file extension …
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 ?
Is it possible to add modules the same way? For example, the rating one.
If you wrap the the module in a div block with a user defined class, you could use CSS to reposition that div block elsewhere on your page. The rating module already has a class assigned to it by Wikidot (page-rate-widget-box).
Here's an example of positioning the rating module in the header section, 50px down from the top of the page:
[[module css]]
.page-rate-widget-box {
position: absolute;
top: 50px;
z-index: 1100;
}
[[/module]]
Turkey shoulder hamburger cow ham chicken. Rump leberkas shank, jerky pig shoulder t-bone capicola bresaola frankfurter flank shankle ham hock. Prosciutto t-bone strip steak turkey fatback drumstick shankle rump pork chop turducken shoulder hamburger tenderloin flank cow.I set up a quick demo on this page.
/forum/t-388551/making-your-own-header#post-
