Take digital advertising. After pouring hard-earned marketing dollars into Google or Facebook ads, you must earnestly optimize your campaigns – testing, tweaking, and hoping that all of your clicks eventually turn into sales.

Once you factor in gross profit, shipping costs, and other expenses, it’s difficult to maintain a strong enough return on investment to scale your marketing efforts.

Thanks for fixing it! Now my mind is finally at ease on that subject!

If you need help with things in the future, the Community website is a great place to ask, as experts frequently visit.

http://css.wikidot.com/theme:community-bootstrap-base/code_

to

//css.wikidot.com/theme:community-bootstrap-base/code_

It should work much better now :-)

Now to figure out how to get rid of the empty space (where the search box was).

Thanks again for the help.

Will

Will

Any way to remove the search function on the top of the template? - trying to reduce the space on the header of the mobile version.

Unless cut to a few words, the title of the page covers text in the body of the text (if it is near the top of the page). I guess I will have to add some white space below the title in order to deal with this issue.

http://www.laxwiki.com/nav:top

Will

[[ul class="nav navbar-nav"]] [[li]][[a href="/home"]][[span class="icon-home"]]@<&nbsp;>@[[/span]]Home[[/a]][[/li]] [[li class="dropdown"]] [[a href="#" class="dropdown-toggle" data-toggle="dropdown"]][[span class="icon-cog"]]@<&nbsp;>@[[/span]]Edit Page [[span class="caret"]]@<&nbsp;>@[[/span]][[/a]][[ul class="dropdown-menu"]] [[li]][[button edit text="edit page"]][[/li]] [[li]][[button edit-sections text="edit (sections)"]][[/li]] [[li]][[button edit-append text="edit (append)"]][[/li]] [[/ul]] [[li]][[a href="/how-to-post"]][[span class="icon-info-sign"]]@<&nbsp;>@[[/span]]How To Post[[/a]][[/li]] [[li]][[a href="/contact"]][[span class="icon-comments"]]@<&nbsp;>@[[/span]]Contact Us[[/a]][[/li]] [[li]][[a href="/join"]][[span class="icon-group"]]@<&nbsp;>@[[/span]]join wiki[[/a]][[/li]] [[/ul]]

I have yet to use Wikidot [[button…]] syntax in a Bootstrap menu, but I can't think of any reason it wouldn't work.

I'd also suggest shortening page titles where you can. Long titles eat a lot of space on small screens.

Like figuring out why the page title overlays and covers some of the page text when seen on a mobile phone (versus being two separate text areas) - http://www.laxwiki.com

Will

One last stupid question - Will this new html only apply to the wiki that I am attempting to convert?

I don't want to mess up the larger wikis on our pro account.

Will

I am not sure how you have everything set up in the admin manager, but it appears that the theme is not being applied at all (meaning it is not there).

The first thing I noticed, though, is that your site isn't using the right html layout yet. It turns out that in order to use Bootstrap, you actually need to change the entire underlying structure of the html. That is why you first need to create what is called a layout, as pictured below:

To find this in the admin manager, go to Appearance & Behavior > Themes > Custom, at the bottom of the page.

In the layout you create, copy and paste the code on this page, and title your layout "Standard Layout".

Once that is done, you can then create a custom theme setting the "Which theme to extend" to "Bootstrap Base", and changing "Choose layout" to "Standard Layout". Then, you can copy and paste the standard theme import code into the box and save. It should look like the below:

Finally, you can then apply the theme to the site by going to the You tab and "installing" the theme like normal.

Let me know if this works or not.

I am trying to convert an existing small wiki to your template - http://www.laxwiki.com

Hoping to get this to work before trying it on our larger wikis.

I pasted your code into the CSS file but we are still getting non-formatted bootstrap pages. Any hints on what I am doing wrong? :)

Thanks.

Will

-Ed

Can't get any easier than that! ;-)

I always use the blank-template, but it's not exactly the best choice for new Wikidot users.

Nice work!

It allows for the user to play around with CSS with relevant fore-content in it. However, it can lead to a ton of pages being created on another site (probably not a problem, seeing that Wikidot's own sandbox gets at least 1 spam page every hour), and the largest problem is that leaving the page without messing with it pops a confirmation message by Wikidot, asking if the person really wants to leave the page (since a page is technically being edited).

I'll also have to add functionality so that it can be more Wikidot-oriented rather than just being a CSS general tester.

Since we're trying to make this Wikidot-specific, it would be slick if we could have our own version that is specific to the Wikidot page elements. For example, taking the user to a page that has a #side-bar or #top-bar and displaying CSS to play with that is relevant to those elements.

-Ed

Yes, that makes sense. As I don't know all of the ways a Wikidot site can be made, I would probably leave that page up to someone else.

It is fine (: In fact, I'll be gone the next two weeks, so you won't see much contributing from me until July after tomorrow.

And to clarify, I think the "Create a new site" guide should focus on the CSS and have limited instruction on other Wikidot features since the main focus here is on CSS.

I'm sorry I haven't been able to spend more time here helping out. Once I get a couple of big projects behind me at work, I should be able to start contributing more.

-Ed

Also, I'm wondering if it is worth making a sandbox or not for people to test out CSS stuff. What do you think?

I step-by-step guide that explains the different methods for starting a new site and then linking to the other topics you've outlined would be a nice addition to this site.

-Ed

I've got the following so far:

• Primer (just an intro with syntax)
• Selectors (Type, Class, and ID)
• Selectors (Descendant, Child, Universal, Adjacent Sibling)
• Attribute Selectors
• Pseudo-classes/elements
• Declarations
• Making a Theme in Wikidot
• Font
• Background
• Lists and Tables
• Element Blocks
• Positioning
• Wikidot's page structure
• Theme Engineering
• Header
• Side bar
• Top bar
• Wikidot Tags
• Forum
• Content Blocks
• Multiple Wikidot Themes
• Media Types
• Browser Compatibility
• @import
• Colors

Are there any others, or are some of these redundant?

I'm watching the site, and the volume and quality of changes are outstanding.

Thanks, Timothy!

-Ed

Many thanks.

Any help available in plain english ? Thx

I had a thought… because this is on my laptop, I sometimes use it behind a corporate firewall and that's when it occurred today (after being fine for the first few hours behind the same firewall)

Is it possible that this is only occurring for you at a school or workplace?

i think it has something to do with this too because this will sometimes happen to me too when im at school behind a firewall.

don't forget that there is also the possibility to edit your theme via the admin in the top:nav for iron giant themes… And in my optinion is it likely that that will become the way to change your theme in the future…

I had a thought… because this is on my laptop, I sometimes use it behind a corporate firewall and that's when it occurred today (after being fine for the first few hours behind the same firewall)

Is it possible that this is only occurring for you at a school or workplace?

Edit: Seeing as I'm home now I've started to load up my sites again, and they're all working. I think there's a good chance it is the corporate firewall getting in the way, and that Firefox might have been running off cache for the first few hours.

I suppose that's why the browsers I don't usually use as much (Chrome and Safari) didn't show the themes either - they didn't have the cache stored for those pages or had auto-deleted the cache when I logged out…

It would be simple if wikidot replaced the ** with <b> but it doesn't. It's beeing changed to <strong>. Wich is also good according to W3C HTML5 standard. They could also have chozen <em> or <b>.

So I thought lets make a list where this conversion is explained. In doing so I came across some strange things like underlined text. This is beeing parsed as <span style="text-decoration: underline;">

So there are two things I am concerned about:

1. this is not HTML5 compliant
2. how can someone adress this selector to change the look? There is no class name.

I know this is CSS in detail but… It causes illogical ways of working, and that's not what wikidot is about I think.

On the other hand

There are still the look of the editor and the comment thread that have a structure and are begging for adjustable style

And since this comment is 100% related to the content of the page I have put it here

There is a problem. When you mix selectors like #header h1 a, then we run into the problem of having way too many selectors. I would think that it is best to describe somewhere on the site how that works (the AND and OR), and on the selector pages, perhaps we can document Base by showing that too.

• #navi-bar
• #header
  • #search-top-box
  • #top-bar
  • #login-status
  • #header-extra-div-1
  • #header-extra-div-2
  • #header-extra-div-3
• #content-wrap
  • #side-bar
  • #main-content
    • #action-area-top
    • #page-title
    • #breadcrumbs
    • #page-content
    • .page-tags
    • #page-info-break
  • #page-options-bottom
  • #page-options-bottom-2
  • #page-options-area-bottom
  • #action-area
• #footer
• #license-area
• #extrac-div-1
• #extrac-div-2
• #extrac-div-3
• #extrac-div-4
• #extrac-div-5
• #extrac-div-6

Invisible by default

• #page-options-bottom-tips
• #page-options-bottom-2-tips
• #account-notifications-dummy

Since for some blocks there is nothing a user can add… there also will be no extra classes or Id then only the existing ones…

What I means is… the H1 in the header should be considered to be something special and is not the H1 from the content… But there will never be a H3 in the header because wikidot decided that the title of a site is H1 and the subtitle is H2…

I know that if styles are the same for different selectors, the easy way of defining and altering them is like this : h1,h2,h3,…{style}… But if we would use the "DOM" like way of looking at selectors and defining their style… the problem would be solved
DOM like way : #header h1 a span {style}. This is of course not so practical…

I am speaking Jibberish (sorry) But English is not my native tongue so…
imagine a page layout @ 50%… We could make it so that if you hover over the site name a popup would appear with the settings of this element… the element would be named in the DOM-like way… So if you were to add this syntax in your css you would be sure that it would only affect this selector

So there are only certain elements like the #header for example wich have limited possibilities. In the main page content… everything is possible… meaning standard css-rules apply and I dont thing we shoul explain them…

We should give a list of the translations for example * = <li> so li{style}, + = h1 so h1{style}

please comment because I know I am not clear here… but make your comments so that I can easely aswer yes or no :-)

#navi-bar .action-buttons a{color:#000;border:1px solid #666;background:#aaa;}

If you want to have fun with the div around the buttons :

#navi-bar .action-buttions{background:#ff0ff;}

—hartnell

— hartnell

-Ed

#navi-bar-shadow{background:#777;height:100px;border:2px solid #000;}

— hartnell

[edit: I just changed the css chat home page to put a link to /system:join where I placed the [[module Join]] so now you can find the password.]

Now that you're back full time, I'm sure you'll eventually get caught up on all of the quirky things going on.

-Ed